Prestige Theme make the product picture smaller

Store Design
, ,
1

Dear Community

How can i make the product picture smaller on the mobile pdp of the prestige theme?

Kind Regards Moritz

2

Hi @mbenne SEARCH first it’s a rule.
Rrespect your time and the time of others by utilizing effort that has already been spent.
https://community.shopify.com/search?q=prestige+theme+small+image

If you cannot find a fit solution, then provide actual detail as others are not mind readers nor have your exact setup.
Provide public exact urls to samples of the problem.

3

Hi Moritz,

You can adjust the product image size on the mobile PDP of the Prestige theme using custom CSS. Here’s a simple way to do it:

  1. Go to Online Store → Themes → Actions → Edit Code.

  2. Open the Assets → theme.scss.liquid (or theme.css) file.

  3. Add the following CSS at the bottom:

@media only screen and (max-width: 749px) {
  .product-single__photo {
    max-width: 80%; /* adjust the value as needed */
    margin: 0 auto;
  }
}
  1. Save the changes and refresh your mobile view to see the updated image size.

This will make the product images smaller and centered on mobile devices. You can adjust the max-width value to get the exact size you want.

Let me know if you want me to provide a slightly more advanced version that keeps the images responsive while reducing their size.

Best regards,
Philip

4

A screenshot would definitely be helpful.

On mobile, product image is set to fit entire screen width, and portrait images may get really tall.

You can try this code in “Custom CSS” setting of the Product info section:

@media (max-width:999px) {
  .product-gallery__media {
    padding: 0 4rem;
  }
}

This will limit the width of the product media element and make it smaller.
My images have transparent background, so you can’t really see added empty space left and right.

Screenshot 2025-11-15 at 2.02.24 PM
Screenshot 2025-11-15 at 2.02.24 PM412Ă—698 70.5 KB
=>
Screenshot 2025-11-15 at 2.02.44 PM
Screenshot 2025-11-15 at 2.02.44 PM412Ă—698 49.5 KB

Or use this code – it will limit the media height more intelligently, to not allow it to grow above 50% of the screen height, which can also be helpful on desktop…

.product-gallery__media>* {
  max-height: 50svh;
  object-fit:contain;
}

The result will be similar to above picture.

1 Like
6

Hello Paul, I previously used the search function but none of the “@media only screen” adjustments worked for me.

The point about the setup you are absolutly right. I should have providet a shop url at least!