Banner desktop & mobile view

[jeffreym]

I want to make image #1 only set for desktop banner and Image #2 only set for mobile view banner.

URL: hygiadental.com
PW: angel

Thankyou in advanced!

1.

2.

[DaisyVo]

Hi @jeffreym 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

section#shopify-section-template--17786616774756__image_banner_AxULMn {
    display: none !important;
}
@media screen and (max-width: 768px){
    body section#shopify-section-template--17786616774756__image_banner_AxULMn {
        display: block !important;
    }
    section#shopify-section-template--17786616774756__image_banner_UqUCxa {
        display: none !important;
    }
}

I hope this helps

Best,

Daisy

[jeffreym]

Hi when I add it to the custom css area it says: 'Online Store editor session can't be published'

I also have this code written in there

.banner__box {
background: transparent;
}
.banner__box .button {
opacity: 1;
}

[DaisyVo · Accepted solution]

Hi @jeffreym 

So please try this way

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 %}
section#shopify-section-template--17786616774756__image_banner_AxULMn {
    display: none !important;
}
@media screen and (max-width: 768px){
    body section#shopify-section-template--17786616774756__image_banner_AxULMn {
        display: block !important;
    }
    section#shopify-section-template--17786616774756__image_banner_UqUCxa {
        display: none !important;
    }
}
{% endstyle %}

I hope this helps

Best,

Daisy