Mobile showing desktop filtering options

Store Design

Topic summary

A user enabled filtering on their Shopify store and encountered a display issue on mobile devices. While the desktop version shows the horizontal filter correctly, mobile displays both the horizontal desktop filter and the mobile drawer filter simultaneously, when only the drawer should appear.

Visual Evidence:

  • Desktop screenshot shows proper horizontal filter layout
  • Mobile screenshot demonstrates the duplicate filter problem

Solution Provided:
A CSS fix was offered to hide the desktop filter on mobile screens:

  • Navigate to Online Store > Themes > Edit code
  • Locate base.css file
  • Add media query CSS that sets display: none for the desktop facet filters on screens 749px and below

The issue appears resolved with this targeted CSS solution that prevents the desktop filter from rendering on mobile viewports.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
2

Hello @ab-hewits

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media screen and (max-width: 749px)
{
    .facets-container > facet-filters-form
    {
        display: none !important;
    }
}

Please hit Like and Mark it as a Solution if you find our reply helpful.