Product Page Image Full Width on Mobile [DAWN THEME]

Store Design
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.

2 Likes
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

1 Like
4

Please accept the solution.