Hide Element hight when no CMS Data is available

Hi Guys,

I have designed a Quick Stack element with 4 Background Images on my products page. It looks great and responsive!
This is what it looks like: Alliance Brillant Ring

But I have that only for certain products. There will be more in time, but for now, If I have not set Images for a certain Product, the Quick Stack element will be invisible but still use up 700px, as that is the hight I have set for the element. 700px of blank space now…
This is what it looks like: Kleiner Granat Ring

How can I make this hight disappear, when there are no Images from the Products CMS?

It would be amazing to get some help on this. :slight_smile:

Cheers,
Mario

Here is my site Read-Only:
https://preview.webflow.com/preview/saintscraft?utm_medium=preview_link&utm_source=designer&utm_content=saintscraft&preview=db6dadf8e1fe721534047e671fb66604&pageId=63862a30ea9f5e68875d8fa6&itemId=655c8bf1fbb3e9686233be73&workflow=preview

Check out the Conditional Visibility feature — it allows you to dynamically hide/show elements based on the content within a CMS collection.

Select the Quick Stack element, head into the Settings panel, and you’ll see a Conditional Visibility section:

Click the “+” button, and add a condition that makes that element visible only when the Model 1 field is set:

image

Since you’ll probably never set the other Model images without first setting Model 1, it’s safe to say that condition will only apply when none of the Model images exist on any given page.

Once you save that condition, the Quick Stack element will disappear from the Kleiner Granat Ring page but show on any other page that has at least the Model 1 image set :+1:

1 Like

Hey Mike,
That does the trick!
Thank you so much for your response!!!

1 Like