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

[flaner]

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

[Manoj_j]

Hi @flaner ,

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

[abdulmoeed37]

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;
}

[CodingFifty]

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;
}
}