I’m trying to create a website that displays different image banner and slide sizes on desktop and mobile. I’ve designed the desktop view to my liking, but when I switch to mobile view, the top slideshow and two image banners appear too large. How can I adjust these sizes for desktop without affecting the mobile view?
Hey @kisslandbeauty
Your store is password protected, can you share the password as well?
Best Regards,
Moeed
Could you please share the store password with me?
Thank you!
Best,
Daisy - Avada Support Team.
password: dausaw
pass: dausaw
Please create 2 Image banner sections, then add this code to Custom CSS of each section.
- Add this code to a desktop section so it will hide on mobile.
@media (max-width: 749px) {
.banner { display: none; }
}
- Add this code to Custom CSS of section for mobile
@media (min-width: 750px) {
.banner { display: none; }
}
Tried adding it but it gave me an error. Where exactly would I apply this at?
when I apply that it removes the banner
Hey @kisslandbeauty
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
1 Like
It worked thanks!
Please use those codes for the slideshow
- Mobile section
@media (min-width: 750px) {
slideshow-component { display: none; }
}
- Desktop section
@media (max-width: 749px) {
slideshow-component { display: none; }
}
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.