Hi there,
I would like to seek help on how can I insert a different image banner for mobile? I’ve already created the specific mobile version but I dont see any options available.
Thanks!
Topic summary
A user wants to display different image banners for mobile versus desktop on Shopify’s Dawn theme. They’ve already created a mobile-specific version but can’t find built-in options to implement it.
Proposed Solution:
- Create two separate banner sections (one for mobile, one for desktop)
- Use custom CSS media queries to hide each banner on the opposite device
- For mobile-only banners: hide on screens wider than 768px
- For desktop-only banners: hide on screens narrower than 749px
Current Status:
The user is asking for clarification on whether they can use a second image specifically for mobile display. The discussion includes CSS code snippets and screenshots, but the conversation remains open with the implementation details being worked out.
Hi @Fabianoo
You can create 2 banner sections, one for mobile and one for desktop and then add code to hide mobile banner on desktop and hide desktop banner on mobile
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;
}
}
