Streaming live at 10am (PST)

Grid items not filling up the grid

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:!bIcEVJJT!CqxgEy7fVcrSX3leUw73RFD4Oy50lI7EsoqDlWzczSI

3 items:!iEcnCYyK!QnkeHnnvpNs-tQZj76U_m3Cft4w-fQzvQqwZBhoRVeY

Read only link:

Try this

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.

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

I tried that and it’s not doing it:!SB8m3L6A!6QvPi46DuVb5fs-NETy48qRLW4EsHKE9ls6tI0MAewQ

  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)

  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:!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.!WJtnyaaZ!i_LHyiOyyLW0f7IxRbRiRN8YFkbcZ1GAFiVtwuQJLM4

1 Like

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