Solved

Separate Desktop and Mobile Image Banner - Ride Theme

Glowsmith
Excursionist
13 0 5

Hello, 

Wondered if anyone could help with the following problem. 

I have been trying to get separate banner images to display for desktop and mobile however I have been unsuccessful, can someone who knows the code help out?

 

website address is www.glowsmith.co.uk

pw glow1

 

Appreciate any support.

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
6881 1296 1323

This is an accepted solution.

Hi @Glowsmith 

You can add 2 separate image nanner sections and then add those codes to make them appear separately for mobile and desktop.
Add this code to Custom CSS code of the section that you want to hide on the mobile.

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

Add this code to the Banner section you want to hide on the desktop.

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

DanFromRyviu_0-1706151631156.png

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
5069 1206 1470

Hi @Glowsmith 

Check this one. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Glowsmith
Excursionist
13 0 5

Thank you but that didn't work for me. 

Dan-From-Ryviu
Shopify Partner
6881 1296 1323

This is an accepted solution.

Hi @Glowsmith 

You can add 2 separate image nanner sections and then add those codes to make them appear separately for mobile and desktop.
Add this code to Custom CSS code of the section that you want to hide on the mobile.

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

Add this code to the Banner section you want to hide on the desktop.

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

DanFromRyviu_0-1706151631156.png

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Glowsmith
Excursionist
13 0 5

Fantastic! That solution was much simpler than most of the others I came across. 

Thank you for your help, very much appreciated. 

Dan-From-Ryviu
Shopify Partner
6881 1296 1323

Happy I could help 😁

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now