Shopify Dawn Theme 7.0.1 - Full screen image on Desktop not showing fully on mobile version

Technical Q&A
,
1

Hi Everyone

I am hoping someone can help me today!

I have trawled the internet to get a fix on how to get the fullscreen web image (1903 x 952 - scaled tp 1500 x 750) to show fully on the mobile version.

I found this code previously posted by Pagefly in the community last Nov 2022 as a solution but unfortunately it is not working for me in the theme.liquid or pasting in the css.

Please can someone assist?

Many thanks

LuvAlwayz3_0-1675333751764.png
LuvAlwayz3_0-1675333751764.png912×243 6.18 KB

@media(max-width:767px){ #Banner-template--15730478481604__image_banner{ height:80vh !important } #Banner-template--15730478481604__image_banner .banner__media.media.banner__media-half:last-child{ height:100% !important } #Banner-template--15730478481604__image_banner .banner__media.media.banner__media-half:last-child img{ object-fit: unset !important } }
2

Hi there!

Thank you so much the website url is https://luvalwayz.com :slightly_smiling_face:

3

I have just removed the password :slightly_smiling_face:

4

Hi @LuvAlwayz3

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: 749px)
.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 21rem !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

HI Victor

Thank you so much for getting in touch! Thankfully it is now resolved as I got in touch with Shopify on Friday and they were able to guide me through the process! :slightly_smiling_face:

1 Like
6

you’re welcome, glad to hear that :grinning_face: