Streaming live at 10am (PST)

CMS template page empty spaces

#1

Hello,
I have troubles with my “Tags” template page:

As can be seen in the image above, there is empty spacing in the collection list.
The collection list contains an image element which gets his image from “product thumbnail” field from the collection “Artworks”.

All items in the collection “Artworks” contains a “product thumbnail” image.
The collection list has a width of 100%;

The collection item has a width of 33.3%;

This has been done to create a three column row. I’ve tried to set a conditional visibility rule at the wrapper-div in the collection item: “product thumbnail is set”.

My share link:sharelink

My loom:
loom

I hope that I’ve explained my problem well enough.

#2

Hello @ElviraNL

The only thing you need to do is change the display setting of your collection list to Flex, here’s a small video to show you:

1 Like
#3

@aaronocampo Thanks for you reply. That does work :smiley: Thanks a lot. I also figured out that the float on the image was the problem for it displaying the wrong way. I removed the float and it also works. But I think I’ll use flexbox as the solution. :+1:

1 Like
#4

Hi @aaronocampo , could you help me out again?

Your solution works, when I don’t have a conditional visibility rule. But when I do have a conditional visibility rule on the image it’s getting weird again.

share link
Loom