Different Image on Desktop

Solved

Different Image on Desktop

luveee
Tourist
6 0 5

Hey, i would like to have different images displaying rather you on mobile or desktop:

https://luveepillow.com/ im talking about the first picutre

(im using a custom theme)

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
11626 2278 2460

This is an accepted solution.

Hi @luveee 

You can do that by adding 2 different banner section, one for mobile and one for desktop then add those codes below to Custom CSS of each section

Add this code to Custom CSS of desktop section

@media (max-width: 749px) {
.banner { display: none; }
}

Add this code to Custom CSS of mobile section

@media (min-width: 750px) {
.banner { display: none; }
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 2 (2)

suyash1
Shopify Partner
10875 1346 1720

@luveee - please check customize settings,  does your theme have an option to set different images for desk and mobile? if yes then please add it from there, else you will need to add one more section with mobile image and using css show/hide the unwanted section

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Dan-From-Ryviu
Shopify Partner
11626 2278 2460

This is an accepted solution.

Hi @luveee 

You can do that by adding 2 different banner section, one for mobile and one for desktop then add those codes below to Custom CSS of each section

Add this code to Custom CSS of desktop section

@media (max-width: 749px) {
.banner { display: none; }
}

Add this code to Custom CSS of mobile section

@media (min-width: 750px) {
.banner { display: none; }
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.