Hero Image desktop & Mobile

Solved

Hero Image desktop & Mobile

jeffreym
Pathfinder
133 2 25

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. Screenshot 2025-01-12 at 7.27.53 PM.png

2.
Screenshot 2025-01-12 at 7.29.36 PM.png

Accepted Solution (1)

DaisyVo
Shopify Partner
3781 406 498

This is an 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: 

image_720.png

image_480.png

  

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 3 (3)

suyash1
Shopify Partner
10569 1306 1674

@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;}
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

DaisyVo
Shopify Partner
3781 406 498

This is an 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: 

image_720.png

image_480.png

  

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
jeffreym
Pathfinder
133 2 25

Yes perfect this solved it straight away, thankyou!