Image Banner View Issue - Desktop and Mobile Optimization

Store Design

Topic summary

A user encountered an image banner display issue where images appeared properly in Shopify’s customize mode but were excessively cropped when viewing the live store on both desktop and mobile devices. Despite trying numerous image sizes and aspect ratios, the banner wouldn’t display consistently across devices.

Initial Troubleshooting:

  • User shared a Google Doc with screenshots illustrating the problem versus desired appearance
  • Multiple community members requested store URL and password to diagnose the issue
  • User declined to share credentials due to privacy concerns while the store remained in draft mode

Resolution:
The issue was resolved by adjusting the banner settings in Shopify’s theme customizer. The user selected “Adapt to first image” under the “Banner Height” option, which automatically adjusted the banner to display properly on both desktop and mobile without requiring specific aspect ratio adjustments.

Status: Resolved independently by the original poster.

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

Hi everyone,

Hoping for a pointer to help me to make an image look uniform across desktop and mobile view. The image looks ok in customize mode, but when i save and view in view my store it is too cropped on both the mobile and desktop view. I have tried so many different sizes, aspect ratios - like dozens and i cant seem to get it to look good on both views.

See word doc below that shows the issue and desired view.

https://docs.google.com/document/d/1Ai4lnPlOYgq9fP4kyX7VgzDBH2ZeAIwA/edit?usp=drive_link&ouid=118031120962296239301&rtpof=true&sd=true

Any suggestions would be most welcome.

Thank

2

Hi @davidgreen1 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

1 Like
3

Hello @davidgreen1 ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

1 Like
4

Hi @davidgreen1 ,
Can you please share the store URL and password if it is password-protected?

1 Like
5

Hi @davidgreen1

Please provide the URL and specify the exact section you are referring to.

  • For desktop, it’s recommended to use images with a horizontal aspect ratio, approximately 16:9.
  • For mobile, the aspect ratio should ideally be 1:1 or 9:16.

This ensures the images display properly across different devices.

Best,

Daisy

1 Like
6

Hi Daisy, thanks for the response, my store is still in draft and i am new to this so not sure if i am comfortable sharing the URL and password just yet. I may be being over cautious but ive been bombarded with people asking for my URL and password.

Ive added some screen shots to a doc in a google drive, does this help?

Thanks

Dave

7

Hey Daisy, i worked it out - thanks.

I simply had to select under the ‘Banner Height’ option ‘Adapt to first image’ and it looks fine now on both desktop and mobile!!!

Thanks

Dave

1 Like
8

Hey Mateen, i worked it out - thanks.

I simply had to select under the ‘Banner Height’ option ‘Adapt to first image’ and it looks fine now on both desktop and mobile!!!

Thanks

Dave

1 Like
9

Hey Zestard Tech, i worked it out - thanks.

I simply had to select under the ‘Banner Height’ option ‘Adapt to first image’ and it looks fine now on both desktop and mobile!!!

Thanks

Dave

10

Hey Websensepro, i worked it out - thanks.

I simply had to select under the ‘Banner Height’ option ‘Adapt to first image’ and it looks fine now on both desktop and mobile!!!

Thanks

Dave