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

Store Design
,

Topic summary

A user wants to make product images display at full width on their product page. They provided a screenshot showing the current layout with constrained image width.

Proposed Solutions:

  • One responder requested the store URL and password to provide a tailored solution
  • Two CSS-based solutions were offered:

Solution 1 (simpler):

  • Add CSS to base.css targeting .product-media-container classes
  • Removes padding and positioning constraints to allow full-width display

Solution 2 (comprehensive):

  • Similar CSS approach but includes media query for screens 750px+
  • Additionally adjusts product info wrapper padding and max-width settings
  • Targets both the media container and surrounding layout elements

Both solutions use !important flags to override existing theme styles. The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
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;
}
}