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:
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;
}
}
