Hi @Mythik
Have to use two different banners
one for desktop and one for mobile.
Because if banner is big then it will be cut from the side in small screens
Topic summary
Non-responsive homepage banner in Shopify Dawn 11.0.0: images are cropped on smaller screens; the goal is to keep 100% of each image visible across devices, with height adjusting as width decreases.
- Current setup: separate desktop and mobile banner images already in use. Applying CSS like height: auto; did not fix the issue; the banner height appears fixed as the screen narrows.
- Observed behavior: as the viewport gets smaller, the desktop banner crops people on the left/right; the mobile banner crops the top. Full content is only visible on large screens.
- Attempted solution: a contributor suggested using two different banners and shared CSS (via screenshot). The code did not resolve the cropping and appeared to show the desktop image on mobile.
- Assets provided: live store URL and password for testing, plus screenshots illustrating desktop and mobile cropping. Images are central to understanding the issue.
Status: unresolved. The requester is seeking CSS or theme configuration that scales banner height with width so the entire image remains visible at all breakpoints.