I am having problems with my CMS page for my blog posts. For some reason there are empty spaces and I have tried many things to fix it but haven’t managed to do so.
You are using Float CSS property for the layout, and with float it’s sometimes tricky to properly layout the elements. On this case because of the heading length your collection items have different height, so where there is increased height row below it doesn’t flow to left.
And for your information, Float which is basically obsolete but mainly not a industry standard anymore. Using Flex and Grid is the best solution.
For this implementation you already have width applied to the child elements, so using Flex to the parent would be the best idea. With Flex apply Flex Direction of Wrap Down.
And your blog image has 100% height, which is also not the best implementation here, just set it to auto.
1 Like
You have it flowing down, you want it to flow across, so that it will wrap down.
Here’s the grid approach, which is similar;
Thank you so much!
All fixed now
1 Like