Dawn Theme- Resizing to fit Mobile Screen

jndunlap
Tourist
3 0 1

My banners look so pretty on a desktop but whenever i click over on my phone it cuts off the banners and it just looks completely different. I’m using the Dawn Theme. and I would like to find out what needs to be done so it looks right on both devices. I’ll post my link so you guys can see it. 

https://theeglamlabb.myshopify.com/

PASSWORD IF IT ASKS: jada

Replies 5 (5)
dmwwebartisan
Shopify Partner
9731 2225 3053

@jndunlap 

lease Go to Online Store->Theme->Edit code then go to assets/section-image-banner.css ->paste below code at the bottom of the file 

 

@media screen and (max-width: 749px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt)>.banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 15rem !important;
}

.media>img {object-fit: contain !important;}
}

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
jndunlap
Tourist
3 0 1

Hey! I’m very new and i’ve never coded anything before sadly🥺 Could you explain with a little more detail what i need to do because Whenever I did it, the coding didn’t change anything and it actually just showed the code on the actual site 

dmwwebartisan
Shopify Partner
9731 2225 3053

@jndunlap 

Please Go to Online Store->Theme->Edit code then go to assets/section-image-banner.css ->paste below code at the bottom of the file .

@media screen and (max-width: 749px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt)>.banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 15rem !important;
}

.media>img {object-fit: contain !important;}
}

 Please check following screenshot 

2021-10-16_19-06_dmwstore1 ~ Edit ~ Dawn.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
jndunlap
Tourist
3 0 1

okay it fixed it but it also does this, does that mean i know need to make my banners wider ?  

90D48AA3-BCFF-4A3E-8BBD-0800989E3979.png

dmwwebartisan
Shopify Partner
9731 2225 3053

@jndunlap 

No , what do you want plase share screensht 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →