Why isn't my high-resolution banner displaying on mobile in the Dawn theme?

Store Design
1

Hi I’ve been recently annoyed by the blurry Shopify banner on the storefront and decided to replace it by a higher resolution and tested with different dimensions. Eventually I’ve found a 1920 x 640 banner that looks less blurry and works on the Desktop version but for some reason it cannot be shown on my mobile phone (I’m using iPhone). Is there a way to adjust the setting so that it can be shown on a mobile phone or I can separate the banner image into desktop and mobile versions so that I can upload another banner for that purpose?

My website is https://cheekybb.com/ and I’m using Dawn theme.

2

@cheekybb it’s visible can you check it again ?

Ujjaval_0-1684769208734.png
Ujjaval_0-1684769208734.png421×600 88.7 KB

1 Like
3

No it doesn’t show on my iPhone :tired_face:

4

IMG_3479.png
IMG_3479.png1284×2778 272 KB

5

@cheekybb refer below url it might be helpful to you solved your problem :
https://stackoverflow.com/questions/18999660/background-image-not-showing-on-ipad-and-iphone

6

But I used the old file (1200 x 400) and it did appear, but the problem is that the iPhone doesn’t like the new px (1920 x 640). Is there a way to strike a balance between image quality and compatibility so that iPhone does show my banner? What’s the max banner width iOS can accept?

7

@cheekybb here you can found your answer based on your device which you have : https://stackoverflow.com/questions/42671616/css-media-query-iphone-max-width

8

sorry i only adjusted the banner width to 1560px to strike a balance between quality and compatibility. not sure adjusting the css can help. thx anyway.