Unable to hide/style empty state of Dynamic Content

On the “Rent at Vivian” page, there’s a module in the title area that only should appear when a current promotion is running (determined by a toggle in the “specials” collection).

When the promotion isn’t running, i need that block to disappear entirely. I tried doing this by switching to the Empty state of the block, and setting it to Display: None. However, the CSS tag isn’t different between the Filled and Empty state, so when I set Empty to be hidden, the filled state is also hidden.

Am I doing something wrong?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @helmsmith

The filter you have set with the switch in collections will do the job of hiding the element, the problem is the styling to parent of this collection item, which has padding and the red background, so even when there’s nothing to display in the list, you still see this red block.

Here’s what you can do…
Remove all your styling from the Collection List Wrapper (class: specials-banner) but add the same styling to the Collection Item (class: collection-item-2), mainly red background colour and padding/margin, you’ll end up with the same design but now nothing will show when your switch is set to off. No need to try and change the empty state visibility.

Let me know how you get on!

1 Like

Perfect. Sounds clear to me. I’ll give it a shot and let you know.

1 Like

Worked! Thanks @marsh

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.