Hi,
I want to make the product gallery bigger on mobile.
Thank you for the help
Topic summary
A user seeks to enlarge the product gallery slider on mobile devices for better visibility.
Solution Provided:
- Add custom CSS to the bottom of the
base.cssfile - The CSS targets mobile screens (max-width: 749px) and adjusts the
.product--columns-mobile .product__media-itemwidth - Uses a calculated width formula:
calc(75% - 1.5rem - var(--grid-mobile-horizontal-spacing))
Outcome:
- The CSS modification successfully resolved the issue
- User confirmed the solution worked as intended
1 Like
Hi @Kaash ,
Can i give a try? Would you mind to share your URL website? with password if its protected. Thanks!
Sure!
Batgrip.myshopify.com
Hi @Kaash
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the base.css file:
@media screen and (max-width: 749px) {
.product–mobile-columns .product__media-item {width: calc(75% - 1.5rem - var(–grid-mobile-horizontal-spacing)) !important;}
}
Regards,
San
It worked! Thanks a lot San