Hi, I have created 2 image banners that are attached to my footer using the “custom liquid” section.
I would like the bigger banner to be shown on mobile only and the smaller one to be shown on desktop only, I am using the Dawn theme.
Website is: stickerworth.com
Password: worthsticker
Thanks for your help!
Hey @StickerWorth ,
To achieve the functionality of displaying one banner only on mobile and the other only on desktop in the Dawn theme, you can use CSS media queries. Here’s how you can do it:
Steps:
Every “custom liquid” section you add in Shopify is assigned a unique ID. Inspect the code of your webpage to find these IDs for the bigger and smaller banners.
Alternatively, in the “Custom Liquid” editor where you added your banners, you can wrap each banner in a
Open the Theme Editor (Online Store > Themes > Customize). Then go to Theme Setting > Custom CSS or edit the base.css file directly in the code editor (Online Store > Themes > Edit Code).
Add the following CSS:
/* Hide the desktop banner on mobile */
@media screen and (max-width: 768px) {
.desktop-banner {
display: none !important;
}
}
/* Hide the mobile banner on desktop */
@media screen and (min-width: 769px) {
.mobile-banner {
display: none !important;
}
}
Save your changes and check the website on both desktop and mobile devices to ensure the correct banners display for each view.
If you run into any issues or need help fine-tuning the setup, let me know!
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
