Goal: show separate banner images for desktop and mobile in Shopify’s Dawn theme, with the mobile banner filling the screen height without being cut.
Initial setup: OP used CSS to toggle two .banner__media elements (desktop first-child visible, second for mobile via media query). Issue: mobile image was still cut.
Proposed fix: a reply suggested CSS setting width: 100%, height: 100vh on small screens with object-fit: cover to maintain aspect ratio. Result: OP reported the desktop image disappeared with that approach.
Resolution: another participant requested the site link and password, then advised adding code above in theme.liquid (exact code not shown in the thread). OP confirmed “It worked.”
Follow-up concerns: a later participant asked where to place the code and noted the solution requires loading two images in the Image Banner, which they felt degraded image quality. They recommended an alternative tutorial by “websensepro” on YouTube, claiming it’s simpler and avoids quality loss.
Status: resolved for the OP with the theme.liquid change; some implementation details remain unclear (missing code snippet), and there’s disagreement about image quality trade-offs. External resources (site link/password, YouTube video) are central to replication.
Hi @JackHampel ,
Please try adding below codes to and see if this works ?
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code just above tag
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka