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.