A user sought to reduce the size of mobile product sliders in the Broadcast Shopify theme, which were taking up excessive screen space. They provided before/after images showing the desired smaller slider appearance.
Solutions Provided:
Two community members offered different approaches:
calc(42% - 52px) for mobile viewports (max-width: 749px)theme.liquid file in the code editor and remove a specific line of code (shown via screenshot)Outcome:
The issue was resolved — the original poster confirmed one of the solutions worked successfully. The discussion demonstrates typical Shopify theme customization for mobile responsiveness, with visual references (screenshots) being central to communicating the problem and solutions.
The mobile media sliders on the broadcast theme are far too large, and take up too much screen space for my liking.
I would like a solution that helps me reduce the size down to something more like this for the mobile sliders:
If someone would be able to provide me code that changes the mobile slider product size, i would really appreciate that. Thank you
Site is laceti.com if needed.
Hi @Carinjable
Please add this code to Custom CSS of the theme setting in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
.index-tab-collections .grid--mobile-slider .grid-item {
width: calc(42% - 52px);
}
}
HI @Carinjable
In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: FInd this line of code and remove it
I hope this helps
Best,
Daisy
Thank you that worked!!
