How to make facets full width for mobile

Shopify Discussion
, , ,

Topic summary

A user working with Shopify’s Dawn theme wants to make the “Filter and sort” button full-width on mobile devices for their jewelry collection page.

Solutions provided:

  • Basic approach: Target the button’s CSS class and set width to 100%
  • Detailed solution: Add custom CSS targeting the .mobile-facets__open element with a media query for screens under 749px width

Recommended CSS snippet:

@media screen and (max-width: 749px) {
  .mobile-facets__open {
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding: 12px 0;
  }
}

Implementation: Add the code to the bottom of base.css or theme.css file. The solution includes optional styling for background color and borders to maintain a clean button appearance.

One responder offered to provide more specific code once they review the exact button implementation on the user’s store.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m using dawn theme and I want to make this button full-width for mobile. Does anyone know how to do this? URL: Jewelry

image
image1918×1078 247 KB

2

Get the class of the button and set the width to 100%

3

On Dawn, buttons usually adapt to container width, so making them stretch full-width on mobile comes down to a small CSS tweak.

You’ll want to target that specific button class in the theme code and adjust its width + display properties. It’s only a quick edit in the stylesheet.

The exact snippet depends on how your button is set up in your store, so it can vary slightly. If you’d like, I can point you to the exact line or even draft the snippet once I know how your button is currently coded.

4

In Dawn, the “Filter and sort” trigger is inside the .mobile-facets__open element. To make it span the full width on mobile, you can add this CSS:

@media screen and (max-width: 749px) {
  .mobile-facets__open {
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding: 12px 0;
    background-color: #fff; /* adjust if you want another color */
    border: 1px solid #e5e5e5; /* optional for a button-style outline */
  }
}

Place it at the bottom of base.css (or theme.css). This will stretch the button across the screen, center the text, and give it a clean button look on mobile.