Keep Product Images from being the whole screen wide on the Prestige theme

[Jarch2]

On mobile devices, the product images take up 100% of the width of the screen. I want it to have some padding around the images so the image would be like 80% the width of the screen. My store is https://mk0uuf-h3.myshopify.com/products/balloon-lamp 

[BiDeal-Discount]

Hi @Jarch2 

let try to add this Custom CSS:

@media screen and (max-width: 1007px) {
  .Product__Wrapper .Product__Gallery {
    max-width: 80%;
    margin-inline: auto;
  }
}

[Moeed · Accepted solution]

Hey @Jarch2 

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 (max-width: 767px) {
.Product__Slideshow.Carousel.flickity-enabled {
    padding: 25px !important;
}
.Product__SlideshowMobileNav.hidden-lap-and-up {
    margin-top: 0 !important;
}
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @Jarch2 

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to do that.

@media (max-width: 749px) {
.Product__Gallery { padding: 0 24px !important; }
}