Make mobile banner fit every phone

Nederlands Discussies Shopify-discussie

Topic summary

A Shopify store owner implemented code to display different banners for mobile and desktop devices. However, the mobile banner is being cropped on some phones, cutting off elements like the ‘50%’ text or white text on the sides.

The Issue:

  • Banner doesn’t scale properly across different phone screen sizes
  • Important content (promotional text) gets cut off at the top or sides

Goal:

  • Find a code solution that ensures the banner fits all phone screens perfectly without becoming blurry or losing quality

The discussion appears to be seeking technical advice on responsive image sizing for mobile devices in Shopify.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

So I added some code which uses 2 different banners, depending on if you’re on mobile or on desktop.

The only thing is that on some phones the mobile banner gets cut off on the top or sides, which cuts a bit off the ‘50%’ or the white text on the sides. What code do I need to make sure that the banner will fit exactly for every phone, without making it blurry.

This is my website: Thesnoozy.com