Image Banner View Issue - Desktop and Mobile Optimization

Solved

Image Banner View Issue - Desktop and Mobile Optimization

davidgreen1
Tourist
9 0 4

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=118031...

 

Any suggestions would be most welcome.

 

Thank

Accepted Solution (1)

DaisyVo
Shopify Partner
4451 497 591

This is an accepted solution.

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 9 (9)

websensepro
Shopify Partner
1953 234 285

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

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
davidgreen1
Tourist
9 0 4

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

ZestardTech
Shopify Partner
6148 1099 1475

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?

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
davidgreen1
Tourist
9 0 4

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

Mateen_Asghar
Shopify Partner
43 1 7

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

Mateen Asghar | Shopify Expert & Partner
Optimizing Shopify Plus stores with 10+ years of web development expertise.
Got your answer? Mark it as an Accepted Solution to help others.
 Reach me at: mateen@100xelevate.com | Visit: 100xelevate.com for quick quotes and expert support.
davidgreen1
Tourist
9 0 4

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

DaisyVo
Shopify Partner
4451 497 591

This is an accepted solution.

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
davidgreen1
Tourist
9 0 4

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

 

davidgreen1
Tourist
9 0 4

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