I just started using Shopify and I’m wondering is it possible to make image banner responsive and to fit screen size on all devices? I’m using Dawn theme. I tried with some additional css settings but it always ends up with overlapping sections. Thanks!
Topic summary
A new Shopify user asks how to make the Dawn theme’s image banner section responsive and fit all screen sizes without overlapping other sections. They’ve attempted CSS adjustments but haven’t achieved the desired result.
Proposed Solution:
- Create two separate image banner sections (one for mobile, one for desktop)
- Use different images optimized for each device type
- Apply custom CSS media queries to show/hide sections based on screen width
Implementation approach:
- Hide mobile banner on desktop using
@media (min-width: 768px)withdisplay: none - Hide desktop banner on mobile using
@media (max-width: 749px)withdisplay: none - Add CSS code to each section’s Custom CSS field
Status: The discussion remains open with one proposed solution provided but no confirmation of whether it resolved the issue.
You can add 2 separate image banner sections and then add those codes to make them appear separately for mobile and desktop and add separate images for each device.
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;
}
}
