A user needs to hide a banner image and text on mobile devices while keeping them visible on desktop. The image is currently blocking the main banner on mobile view.
Three solutions were proposed:
JavaScript approach: Add code to theme.liquid file above the </body> tag to hide elements with specific classes on mobile
CSS with opacity: Insert CSS in theme.css/base.css using opacity: 0 !important for screens under 767px width
CSS with display none: Similar CSS approach but using display: none !important instead of opacity
All solutions target the .slide-img.medium-down--hide class using media queries for mobile viewports. One responder noted that previously added code should be removed before implementing their solution.
Status: Multiple solutions offered, awaiting user confirmation of which approach worked. Store URL was requested by some helpers but not provided in the visible thread.
I have an image on the banner which I would like to retain only for desktop view.
For mobile view, I would like to remove the image and the text as it is blocking the main banner image.
Help on this will be much appreciated, thank you!
Desktop view
Mobile view
Hi @LaurenLw , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
@LaurenLw - can you please share your website link?
Hey @LaurenLw
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @LaurenLw
@media(max-width:767px){
img.slide-img.medium-down--hide {
opacity: 0 !important;
}
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
@LaurenLw Hello
@media(max-width:767px){ img.slide-img.medium-down--hide { display: none !important; } }
Accept as solution if its useful thanks
