The mobile layout is fine, but in desktop mode, the images are way too big and do not adapt to desktop correctly. Some images get cut off Here is my preview link: https://1hyf20wssoxuzngz-26704248912.shopifypreview.com
Topic summary
A user reports that image banners in the Dawn theme display correctly on mobile but appear oversized on desktop, with some images getting cut off.
Proposed Solution:
- Create separate Image Banner sections for desktop and mobile, each using appropriately sized images
- Apply custom CSS media queries to show/hide the relevant section based on screen width:
- Desktop version (min-width: 750px): hide mobile banner
- Mobile version (max-width: 749px): hide desktop banner
Alternative Approach:
If uploading only one image is preferred, use a 2:3 aspect ratio image that can adapt to both desktop and mobile layouts.
Status: The user is testing the dual-section approach with CSS media queries to resolve the responsive display issue.
Your preview link is expired
Here is my new preview link: https://11epbtnqwslbgzqw-26704248912.shopifypreview.com thanks!
Your images dimension is not suitable for desktop, so I recommend you create another Image Banner section for desktop and use another image. After that, please add this code to Custom CSS of the section that will be used for desktop
@media (max-width: 749px) {
.banner { display: none; }
}
And this code for section will be used for mobile
@media (min-width: 750px) {
.banner { display: none; }
}
Okay I will try this. However, how can I resize it to fit on both desktop and mobile if I’m only able to upload one image?
You can try to use an image ratio of 3:2