Hello All,
I am currently using the CMS feature to help me create this two column grid. If you take a look at the link you’ll notice that the top two images are different sizes. Is there a way to make it so that I don’t have that huge gap between the 1st image and the one directly below it? How do I fix this sort of thing from happening going forward for both sides if I want different sized cover images?
Thank you in advance for your help!
Hi @Jeckert!
If you put your collection item as block and position: float left
and calculate an exactly min height and max height
maybe you can control to don’t have that gap.
Cheers,
Eve Kayser
PERFECT! Thank you so much @evekayser. For whatever reason I couldn’t wrap my brain around this one. Appreciate you!
Hi @evekayser I actually ran into another issue when changing the one of the images below to the same larger size. That same issue is appearing but looks to be fixed on the right side? Kind of odd.
Oh I got it, so I would suggest you to use 2 columns, and put 1 collection inside each column. Then you can duplicate cms and control using limit items:
Eve Kayser
That is what I was going to try next. I’ll give it a go and let you know if that works. Thanks again @evekayser
Alright so I figured it out.
I had to separate these into two columns. I used the same CMS category for both columns but had to create a dropdown field within the CMS that allowed me to filter the left column from the right column.
This allows you to control the padding/spacing and not have to worry about the size of the image above it.
Thanks for your help @evekayser!
