How to make product image bigger on product page? I am using Dawn

[CharlesCheng]

Does anyone knows how to make product image bigger on product page?

From this

to this

I find someone asked before but I can’t find theme.css from assets.

My theme is Dawn and I don’t know it is the problem or not.

Thank you for your help.

[tim_tairli]

For narrow images theme restricts image width so that image does not grow too big and too tall.

This IMHO makes sense because otherwise thumbnails and product title may end up being below fold and you’d need to scroll to see them.

On the taller device you will see bigger image.

If you look into assets/section-main-product.css there is a code like this:

.product-media-container.constrain-height {
  /* arbitrary offset value based on average theme spacing and header height */
  --viewport-offset: 400px;
  --constrained-min-height: 300px;
  --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
  margin-right: auto;
  margin-left: auto;
}

.product-media-container.constrain-height.media-fit-contain {
  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
  width: min(var(--contained-width), 100%);
}

You may try reducing the viewport-offset value to make your images bigger.

Another option is to select “Fill” for your “Media Fit” setting of “Product information” section. The image will cover entire width of the screen (with some padding) but will be slightly cropped vertically if it’s too tall.

[CharlesCheng]

Thank You!