Show product pictures full screen on mobile

[JoaquinExcitare]

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

[Moeed]

Hey @JoaquinExcitare 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product-media-container.constrain-height.media-fit-contain {
    width: 100% !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[made4Uo]

Hi @JoaquinExcitare 

I am assuming you have your images in the same ratio. You can follow the instructions below

1. From the Admin page, go to Online Store > Themes
2. Select the theme you want to edit, click the three dots to edit code
3. Under the Asset folder, open the base.css
4. 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.

[Dan-From-Ryviu]

Hi @JoaquinExcitare 

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;
    }
}