Automatically resize the banner Dawn theme when on mobile so the ends are not cut off

[David0761]

I was using Dawn 5.0 on my website and just updated to 8.0  When I used 5.0 the image banner would resize when going between mobile and desktop so it always looked the same. Now with 8.0 when I go to mobile the ends of the banner are cut off so you can not see the whole image and looks odd. Is there code to make this resize to fit the screen that is being used? Thank you for any help with this.

 

 

[StoreWatchers · Accepted solution]

Hello @David0761,

Greetings from the Store Watchers Support Team! Happy to help you today.

Go to Online Store -> Actions -> Edit code. Then find theme.liquid.

In your theme.liquid file, please paste the code below before the </head> tag.

{% if template == 'index' %}
<style>
@media only screen and (max-width:768px){
#shopify-section-template--16708665737460__image_banner .banner{
height: 140px!important;
}
#shopify-section-template--16708665737460__image_banner .banner img{
object-fit: contain!important;
height: auto!important;
}
}
</style>
{% endif %}

Let me know if need further assistance

Regards,
Store Watchers Support Team

[David0761]

Worked perfect! Thanks so much for the help.

[JennsCrafting]

Hey! I've encountered the same issue but entering the code did not work. Pls help.