Hero Image desktop & Mobile

[jeffreym]

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

URL: hygiadental.com
PW: angel

Thankyou in advanced!

1.

2.

[suyash1]

@jeffreym please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

@media screen and (min-width: 750px) {
section#shopify-section-template--17786616774756__image_banner_aBAKPB{display:none; visibility:hidden;}
}


@media screen and (max-width: 749px) {
section#shopify-section-template--17786616774756__image_banner_miXpMH{display:none; visibility:hidden;}
}

[DaisyVo · Accepted solution]

Hi @jeffreym 

In order to fulfill your request, please follow these steps

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 %}
{% if template.name == "index" %}
main#MainContent > section:nth-child(2) {
    display: none;
}
@media screen and (max-width: 768px){
main#MainContent > section:nth-child(2) {
    display: block !important;
}
main#MainContent > section:nth-child(1) {
    display: none !important;
}
}
{% endif %}
{% endstyle %}

Here is the result: 

  

I hope this helps

Best,

Daisy

[jeffreym]

Yes perfect this solved it straight away, thankyou!