How can I display different banners on mobile and desktop?

Store Design
, ,
1

Hi everyone, I have 2 image banners on the website homepage and I would like the first image to be displayed only on computers while the second image I would like to be displayed only on smartphones. Do you know how to do it? Thanks a lot to everyone.

https://refade-8966.myshopify.com/

password: refade

2

Put this on the custom-css of the section banner:

desktop:

@media screen and (max-width: 740px) {
.banner {
display: none !important;
}
}

and the mobile one:

@media screen and (min-width: 741px) {
.banner {
display: none !important;
}
}

3

In image-banner.liquid?

4

@Marco211

Hello, I have check your store you have using 2 time banner image section

section#shopify-section-template--19286285844822__4ba84472-fb1d-4ccb-a47c-a3e816de3c42 {
    display: none;
}

@media only screen (max-width:749px){
 section#shopify-section-template--19286285844822__4ba84472-fb1d-4ccb-a47c-a3e816de3c42 {
    display: block;
}
div#Banner-template--19286285844822__6e05558a-bf37-4f69-92c5-c885b0a7af2c {
    display: none;
}
}

Add This CSS Go To online Store > Edit Theme > Assets > base.css

5

On the computer it’s fine because I only see the first banner but on smartphone I see the first banner instead of the second