A user wants to modify product page image sizing on mobile to display images at 80% width with visible borders, eliminating side margins (reference image provided).
Solutions Offered:
Multiple CSS code snippets were provided targeting the Broadcast theme’s mobile product slider:
.product__slide width to calc(100% - 80px) or 80%.product__slides1px solid #000)Current Status:
The discussion remains open. Several users requested the store URL to provide more tailored solutions, but the original poster has not yet responded with this information or confirmed whether the suggested CSS code resolved the issue.
Hi @okocha21
You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check
@media (max-width: 749px) {
.index-product .product__images--mobile-slider .product__slide {
width: calc(100% - 80px);
margin: 0;
border: 1px solid #000;
}
.index-product .product__images--mobile-slider .product__slides {
padding-left: 0px
scroll-padding: 0;
}
}
