Taste theme - Two separate banners for mobile and desktop

[TvojTatkovSyn]

Hey, im trying to make two banners for mobile and desktop. I saw on here that you can hide one of the banners so only one appears on mobile and one on desktop. But i only saw it in dawn theme, can you do that tsate theme aswell? can anyone help me?

https://6ec26c-7f.myshopify.com/

[BSSCommerce-B2B]

@TvojTatkovSyn,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
@media only screen and (max-width: 767px) {
  #shopify-section-template--23806452269405__image_banner_QraQyH {
    display: none;
  }
  #shopify-section-template--23806452269405__image_banner_NmTYz8 {
    display: flex;
  }
} 
@media only screen and (min-width: 768px) {
  #shopify-section-template--23806452269405__image_banner_QraQyH{
    display: flex;
  }
  #shopify-section-template--23806452269405__image_banner_NmTYz8 {
    display: none;
  }
}
</style>

Result:

Desktop: 

Mobile

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

Best Regards 😊

[TvojTatkovSyn]

worked but...

[BSSCommerce-B2B · Accepted solution]

Sorry change the previous code like this

<style>
@media only screen and (max-width: 767px) {
  #shopify-section-template--23806452269405__image_banner_QraQyH {
    display: none;
  }
  #shopify-section-template--23806452269405__image_banner_NmTYz8 {
    display: block;
  }
} 
@media only screen and (min-width: 768px) {
  #shopify-section-template--23806452269405__image_banner_QraQyH{
    display: block;
  }
  #shopify-section-template--23806452269405__image_banner_NmTYz8 {
    display: none;
  }
}
</style>

[TvojTatkovSyn]

Thank you man, Worked perfectly

[BSSCommerce-B2B]

Glad to help you 😀

[LizHoang]

Hi @TvojTatkovSyn 

Thanks for your questions. 

We have the solution for your query, we hope it helps. To show one banner on Mobile and one banner on Desktop, you can follow the instruction below : 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Customize > Homepage

Step 2: Access to Image banner section: https://prnt.sc/QTr1_m9Ro6Ac

Step 3: There will be 2 sections to add image. First section to add Desktop image, second section to add for Mobile : https://prnt.sc/YkUTYnZbn_rP 

Step 4: On that image banner section, scroll down to the Custom CSS section and add the CSS code below to that section : https://prnt.sc/CQDPSaIDtBzA

.banner.banner--content-align-center > div:nth-child(2) {
    display: none;
}
.banner.banner--content-align-center > div:nth-child(1) {width: 100% !important;}
.banner.banner--content-align-center > div:nth-child(1) > img {
    object-fit: contain;
}
@media screen and (max-width: 768px){
   body .banner.banner--content-align-center > div:nth-child(2) {
        display: block;
    }
    .banner.banner--content-align-center > div:nth-child(1) {
        display: none;
    }
    .banner.banner--content-align-center {
        flex-direction: column-reverse;
    }
}

 We hope that it helps.

[TvojTatkovSyn]

BSSCommerce...Worked but ...