Does anybody know how we can adjust the pictures on mobile to full screen without the “zoom in” function above Left?
URL: https://excitarestudios.myshopify.com/products/flower-ring-silver
Thanks
Topic summary
A user seeks to display product images at full screen width on mobile devices, removing the default “zoom in” function that appears above left.
Three solutions were provided:
-
JavaScript approach: Add custom code to the theme.liquid file, just above the closing
</body>tag, to modify image display behavior. -
CSS modification (base.css): Insert media query code targeting screens under 768px width into the base.css file under the Assets folder. This adjusts
.product__media-item,.grid__item, and related classes to use 100% width with auto height. -
Custom CSS (Theme Customizer): Add CSS through the theme customization panel targeting screens under 749px, modifying
.product__media-listand.slider--mobileclasses to calculate full viewport width plus additional spacing.
All solutions use CSS media queries to override default mobile image constraints. The approaches differ in implementation location (theme file vs. stylesheet vs. customizer) but achieve similar full-width display results. Code snippets and preview images were included with each solution.
2 Likes
Hey @JoaquinExcitare
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
I am assuming you have your images in the same ratio. You can follow the instructions below
- From the Admin page, go to Online Store > Themes
- Select the theme you want to edit, click the three dots to edit code
- Under the Asset folder, open the base.css
- Then place the code below at the very bottom of the file and SAVE
@media screen and (max-width: 768px) {
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
width: 100vw;
}
.grid--peek.slider .grid__item {
margin: 0 !important;
width: 100%;
}
.product__media.media.media--transparent {
height: auto;
width: 100%;
}
}
Please see preview below.
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
body .product__media-list .product__media-item {
width: calc(100% + 3rem);
}
.slider.slider--mobile {
scroll-padding-left: 0;
max-width: calc(100% + 3rem);
gap: 0;
}
}
