How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

To hide the “No Items Found” empty state from a second multi-image gallery on specific pages in Webflow, you’ll need to conditionally style or remove that element using Webflow’s visibility settings or custom code.

1. Identify the Second Gallery's Wrapper

• Select the container for the second multi-image gallery on the page (likely a Collection List or a specific div).
• Make sure it has a distinct class or ID so it can be targeted separately via Webflow conditions or custom CSS.

2. Use Conditional Visibility (CMS Only)

• If you're binding this gallery to CMS content:
• Select the “No Items Found” element inside the second gallery’s Collection List.
• In the Element settings panel, scroll to Conditional Visibility.
• Add a condition like "Only show when [Image Field] is set" or the inverse: "Hide when [Image Field] is empty".
• Ensure this condition doesn’t conflict with the first gallery.

Note: Conditional visibility only works with CMS-bound elements within a Collection List.

3. Use Page-specific Custom Code (If Needed)

• If CMS conditions aren't sufficient (e.g., you're not using Collection Lists for the page or need per-page targeting), add custom CSS via Webflow’s Page Settings → Custom Code section:

<style> body.slug-name .second-gallery-class .w-dyn-empty { display: none; } </style>

• Replace slug-name with the specific page slug, and second-gallery-class with the class applied to the outer container of your second gallery.
• .w-dyn-empty is Webflow’s default class for “No Items Found”.

4. Use Webflow’s Page Load Script Optionally

• If you want to dynamically hide the empty state only if it’s empty on certain pages, use this JavaScript in the page custom code section:

<script> document.addEventListener("DOMContentLoaded", function() { if (window.location.pathname.includes("your-page-slug")) { var emptyState = document.querySelector('.second-gallery-class .w-dyn-empty'); if (emptyState) { emptyState.style.display = 'none'; } } }); </script>

• This hides the “No Items Found” div if it exists, only on pages matching the slug specified.

Summary

To hide the “No Items Found” message for a second multi-image gallery on certain pages, use Conditional Visibility if working with CMS content, or add page-specific CSS or JavaScript in Page Settings → Custom Code. Always use unique classes to precisely target the second gallery.