My store is on the Broadcast theme. I have “highlight” buttons at the top of a collection page for customers to quick filter products. They are fine on desktop. However, I have the slider view for mobile and they are showing up extremely wide. I want to make them much narrower to match the look on desktop. Anyone have a way to do this or advice for custom css code to fix?
Topic summary
A Shopify store owner using the Broadcast theme is experiencing layout issues with collection highlight filter buttons on mobile devices. The buttons appear excessively wide in slider view, unlike their properly-sized desktop counterparts.
Current situation:
- Desktop version displays correctly
- Mobile slider view shows buttons too wide (see attached screenshots)
- The problematic mobile view hasn’t been published yet; buttons are currently stacked instead
Attempted solutions:
- Adjusted
.highlights__item--button .btnmin-width from 100 to 75 - Modified scroll padding to 0
- Both changes created unwanted gaps without resolving the core issue
Community guidance:
- Store URL shared: haydenbjewelry.com/collections/bracelets
- Suggestion provided: The slider width is controlled by JavaScript configuration, not just CSS. Adjusting the number of columns displayed on mobile and then fine-tuning the slider settings may resolve the issue.
The discussion remains open with no definitive CSS-only solution yet identified.
Please can you share a link to the store and I can take a look?
@alysianco
If you share your store url.It will easy for community developer to help you fast.
Thank you
https://haydenbjewelry.com/collections/bracelets
We have not pushed the slider view on mobile live yet because it’s not looking how we want it (per the screenshots).
@Arif_Shopidevs thanks! It’s https://haydenbjewelry.com/collections/bracelets We have not pushed the slider view on mobile live yet because it’s not looking how we want it (per the screenshots). Currently they are stacked on mobile view.
I adjusted min width of .highlights__item–button .btn from 100 to 75, but the smaller I go, it creates a bigger gap. Also changed the scroll padding to 0 but still not solved.
@alysianco The slider is depends on your slider js also they take the room of the slider you can set the no of columns in mobile and then adjust the slider.