Hello,
I have created an online website however my coding knowledge is not that advanced therefore I would require some help.
I have added an image banner on the website however when I browse using my iPhone, the banner is very small. I would like to replace the image banner with a slideshow of 3 images, this slideshow should show only when you are browsing the mobile version.
Could anyone advise what code do I need to use to do this?
Thank you for your help!
Hello @mdxx you can show hide the sections by css
CSS to hide a section on Desktop do this will be only for Mobile
@media (min-width:768px) {
.section-class-name {
display:none;
}
}
CSS to hide a section on Mobile so this will be for only Desktop
@media (max-width:767px) {
.section-class-name {
display:none;
}
}
Hey @mdxx
Can you share the link to your store? Thanks
Hi,
Thank you for your reply and help
Will try that and provide feedback, hopefully it works
Thanks
Hey @mdxx ,
Could you add the slideshow as well? It’ll be visible on both mobile and desktop when you add it, but then I can give you the exact code to hide either or depending on the device.
Hey,
I just added the slideshow now, on desktop it looks too big but the size looks fine on mobile
Thank you again for your help!
Hey @mdxx ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey,
Thank you so so much, it worked! Couldn’t have done it without your help!
Quick question - I want to do the same thing but with another image banner (reviews at the bottom of the page)
Should I use the same code and replace the IDs?
Thanks again
Yeah you can actually use the same one, but I did it for you anyway.
Here’s the code. Just follow the same instructions as above, don’t delete the code above. Add this along with that
Thank you so much again, I really appreciate all your help, will definitely reach out again if needed!
You are the best!
Have a great weekend!
me again 
regarding the code above, I copied and pasted the code after the first code I entered and it hides the image banner on mobile, showing only the slideshow however on the desktop version it still shows both versions (image and slideshow)
Did I paste it in the wrong place?
Haha yes,
One of the tags has to be before the 2nd tag after the } (closing curly brace. So basically your line 40 moves between the current line 21 and 22.
Haha makes sense, works now, thank youu again 
