Streaming live at 10am (PST)

Grid items not filling up the grid


#1

The items in my grid are not totally filling up the available space on the right side of the container. And it’s even worse on pages where there are only 3 items. What am I doing wrong?

More items:
https://mega.nz/#!bIcEVJJT!CqxgEy7fVcrSX3leUw73RFD4Oy50lI7EsoqDlWzczSI

3 items:
https://mega.nz/#!iEcnCYyK!QnkeHnnvpNs-tQZj76U_m3Cft4w-fQzvQqwZBhoRVeY

Read only link:
https://preview.webflow.com/preview/uxuiland?preview=5df09bce607b2e12c8384b7c519630b2


#2

Try this http://vincent.polenordstudio.fr/snap/aix8l.jpg


#3

Hi. Responsive grid is by % - but you set fixed px.
thumb-image —> 280px width
thumb-link --> 280px width
Responsive images set to 100% w and auto: height.


#4

I did just that and it’s the same result.


#5

I tried that and it’s not doing it:
https://mega.nz/#!SB8m3L6A!6QvPi46DuVb5fs-NETy48qRLW4EsHKE9ls6tI0MAewQ


#6
  1. Create div (block element = 100% width of the parent) --> in your case the “parent” is the col
  2. Thats it - without any style the div “filling up” the grid.

If you want to “destroy” this - you set px width to the div (280px in your example) - and/or change is style to inline-block (inline - like text - the width related to the content inside)

change - thumb-image & thumb-link + remember you work with bg images + Link Block should be “display: block;” (why you change this toinline-block?)

bg style

also bg-image - you can add style to the bg (Common: cover + center-center + no-repeat for example)


#7
  1. Thanks, but in this case my 280px wide thumbnails won’t work! They are repeated to fill in the thumb-link. Can’t I rather modify the grid so that the 280px width x3 col would fill in the grid with more space in between the cols?

  2. Also, with 100% width the frame border flips over the screen to the right:
    https://mega.nz/#!yElFkAbJ!VsaI6IoxvMswyDBQcVD0ptbgQg1fnZDyvGAUErfppBk

  3. And now, even though I set min height 200px there is a 1px gap at the bottom of the image, even if my image is exactly 200px high.
    https://mega.nz/#!WJtnyaaZ!i_LHyiOyyLW0f7IxRbRiRN8YFkbcZ1GAFiVtwuQJLM4


#8

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.