Fix for separate banner images on mobile and desktop - Dawn theme

Store Design
1

Hello everyone,

I added the code below to my section-image-banner.css of my Dawn theme to separate the banner images on mobile and desktop, and it works! Unfortunately I noticed that, the email signup banner section, and every section with banner, that doesn’t have two banners option, doesn’t show the banner on mobile.

Which code should I add/change to fix this?

Thank you in advance

@media screen and (min-width: 750px) {
  .banner {
    min-height: 80rem !important; flex-direction: row;
  }
}

.banner__media:first-child {
    width: 100%;
}

.banner__media+.banner__media {
    display: none;
}

@media screen and (max-width: 749px) {
  .banner__media:first-child {
    display: none;
  }
  .banner__media+.banner__media {
    width: 100%;
    display: block !important;
  }	
  .banner__content::before{
    padding-bottom: 150% !important;
  }
}
2

@King-Kang ,

Welcome to the Shopify Community! Please share your store URL and screenshot, so that I can check your issue and will back to you with a proper solution. Have a Good Day!..

3

Hi,

Did you find a way to fix it? I’d be very interested in finding a solution as well !