Different Banner Sizes on Mobile vs PC - Dawn Theme

[Answer_Seeker10]

Hey guys, 

The link to my site: 

www.moomoosteas.com

PW: fohtea

So I have 2 different image banner sizes - I want to use one on mobile and one on PC. If you go to my page you'll see where I want to implement this in 2 places: 

1.) Under my "About Us" section

2.) Under my "Contact" section 

So the way I have it set up is on both pages you'll see 2 identical banners there, just different sizes currently. The top banner on both pages is the one I want on the PC site. The second banner (the larger banner) is what I want on the mobile site. Both of them are listed there simply so you can see the location and determine the CSS to make this happen using the actual images. Havent redrawn the smaller resolution image so it is still blurry, but just want to get the CSS down to make this happen. 

Thanks!!!

[BSSCommerce-B2B · Accepted solution]

@Answer_Seeker10,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
/* Code for Desktop Banner */
@media screen and (min-width: 769px){
  #shopify-section-template--23299196420369__image_banner_nGK6px,
  #shopify-section-template--21540082843921__image_banner_fWc6Fw{
    display: none;
  }
  #shopify-section-template--23299196420369__image_banner_6pdPrp,
  #shopify-section-template--21540082843921__image_banner_QJYkxb{
    display: block;
  }
}
/* Code for Mobile Banner */
@media screen and (max-width: 768px) {
  #shopify-section-template--23299196420369__image_banner_nGK6px,
  #shopify-section-template--21540082843921__image_banner_fWc6Fw{
    display: block;
  }
  #shopify-section-template--23299196420369__image_banner_6pdPrp,
  #shopify-section-template--21540082843921__image_banner_QJYkxb{
      display: none;
  }
}
</style>

If it helps you, please like and mark it as the solution.

Best Regards 😊

[Answer_Seeker10]

Thank you very much BSS, worked like a charm!!!! Much appreciated!!!

[Dan-From-Ryviu]

Hi @Answer_Seeker10 

Please add this CSS code to Custom CSS of each section.

Add this to Custom CSS of the section you want to display on mobile only 

@media (min-width: 750px) {
.banner { display: none; }
}

And this code for desktop section 

@media (max-width: 749px) {
.banner { display: none; }
}