Product Page Image Full Width on Mobile [DAWN THEME]

Store Design

AI-generated summary

A user seeks to make product page images display at full width on mobile devices for their Shopify store using the Dawn theme.

Problem:

  • Product images currently don’t span the full width on mobile
  • User wants images displayed edge-to-edge (left to right)

Solutions Provided:

Two community members offered CSS code solutions:

  1. shreyhweb’s approach: Add CSS code above </body> in theme.liquid

    • Targets screens up to 576px and 577px-767px
    • Adjusts padding-top to 400px and sets min-width to 100%

  2. PageFly-Victor’s approach: Add CSS code to Assets -> Base.css

    • Similar solution targeting screens up to 767px
    • Uses same padding and width adjustments

Both solutions modify .product-media-container classes with media queries to achieve full-width display on mobile devices.

Status: Solutions provided, awaiting user confirmation of which approach worked.

1

Hi Shopify Community,

My website url is : https://malayanwolfpack.myshopify.com/

I would like to know how I could get the product page images to be displayed on full width left to right.

Current image display has been shared below too. Thank you

Product Page Screenshot.jpg
Product Page Screenshot.jpg722×829 38.1 KB

2

@malayanwolfpack

Hello,

Please add the below code above in theme.liquid

online store >> edit code >> theme.liquid

@media screen and (max-width: 576px) { .product-media-container.constrain-height .media{ padding-top: 400px!important; } .product-media-container.constrain-height.media-fit-contain{ min-width:100%!important; } } @media screen and (min-width: 577px) and (max-width: 767){ .product-media-container.constrain-height .media{ padding-top: 800px!important; } .product-media-container.constrain-height.media-fit-contain{ min-width:100%!important; } }

after added looks like this

shreyhweb_0-1682188690981.png
shreyhweb_0-1682188690981.png827×932 355 KB

If our solution is helpful for you then Please like the post and tad to accepted solution.

Thankyou.

3

Hi @malayanwolfpack

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media screen and (max-width: 767px) {
.product-media-container.constrain-height .media{
padding-top: 400px!important;
}
.product-media-container.constrain-height.media-fit-contain{
min-width:100%!important;
}
}
@media screen and (min-width: 1240px){
.product-media-container.constrain-height .media{
padding-top: 800px!important;
}
.product-media-container.constrain-height.media-fit-contain{
min-width:100%!important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

4

Please accept the solution.