Change size of Product page image in crave theme

Store Design
1

I want to change the size of the product image on the product page in the crave theme. The image is way to big in my opinion, but i cant find the right line of code to so.

  <div class="product__media media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
    {{ media.preview_image | image_url: width: 1946 | image_tag:
      loading: lazy,
      sizes: sizes,
      widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
      alt: media.preview_image.alt | escape
    }}

This is the Code in product-thumbnail.liquid that changes the image, but somehow im just able to change resolution and frame, but not the image size itself.

Does anyone know how to do this ?

Thanks in advance :slightly_smiling_face:

2

@Parfums-testen - can you share the page link where you have this big image?

3

https://parfumtester-online.myshopify.com/products/xerjoff-accento

4

Hi @Parfums-testen
Your site is password protected, please send me the password. I will check it.

5

I actually found a solution:

In section-main-product.css i edited the “max-width”-parameter for the product–large class

@media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__media-wrapper {
max-width: 55%;
width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2);
}

.product--large:not(.product--no-media) .product__info-wrapper {
padding: 0 0 0 4rem;
max-width: 25%;
width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
}

.product--large:not(.product--no-media).product--right .product__info-wrapper {
padding: 0 4rem 0 0;
}

.product--medium:not(.product--no-media) .product__media-wrapper,
.product--small:not(.product--no-media) .product__info-wrapper {
max-width: 45%;
width: calc(55% - var(--grid-desktop-horizontal-spacing) / 2);
}

.product--medium:not(.product--no-media) .product__info-wrapper,
.product--small:not(.product--no-media) .product__media-wrapper {
max-width: 35%;
width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
}
}