How can i make my product image in my product page full width?

Store Design
,
1

Hi, How can i make the image in the screenshot more full width.

Scherm­afbeelding 2025-03-14 om 16.54.40.png
Scherm­afbeelding 2025-03-14 om 16.54.40.png2940×1912 469 KB

2

Hi @flaner ,

share your store url and password ( if password protected ).

3

Hi @flaner add the following css in your base.css file

.product-media-container.constrain-height.media-fit-contain {
  width: 100% !important;
}

.product-media-container.constrain-height .media {
  padding-top: 0 !important;
}

.product-media-container.constrain-height .media img {
position: relative !important;
}
4

Hi @flaner ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 750px) {
.product__info-wrapper--extra-padding {
        padding: 0 0 0 3rem !important;
    }
.product--small:not(.product--no-media) .product__media-wrapper,
.product--small:not(.product--no-media) .product__info-wrapper {
        max-width: 50% !important;
}

.product-media-container.constrain-height.media-fit-contain {
  width: 100% !important;
}

.product-media-container.constrain-height .media {
  padding-top: 0 !important;
}

.product-media-container.constrain-height .media img {
position: relative !important;
}
}