Hi Guys,
I’m wondering if any of you good people could help me with this issue.
On the site below, on the News Page, the collection isn’t rendering out properly on larger screens. On the second row it seems to skip a box for a news item, leaving this weird structure.
Would anyone know what I’m doing wrong here, or is there something obvious I’m missing?
Thanks again for you help in advance.
Kindest regards,
billy.
One way to avoid this kind of a problem is to leave the legacy column component behind, and instead leveraging modern CSS with flex or CSS grid with collections.
If you use Chrome’s Inspect Tool, look at the height of the news story box, including the bottom margin (see screenshot). You’ll see that the first one is longer than the second item, so the third story is blocked from showing up in the left column and is pushed over to the next empty space. It looks right further down the page because the stories on the left take up less space than the ones on the right.
The extremely hacky (i.e. wrong) way to fix this would be to set a height on the box, but that doesn’t always look good with longer or shorter text and still might not be tall enough to clear the longest text, causing either overlapping or big gaps.
As @webdev mentioned, the correct method would be to switch to using grid or flex for the collection list since the height of the grid or flex-box items will then be determined by the content within the adjacent items.
