Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Shopify Community Downtime: The Shopify Community will be down December 5th for 15 minutes between 3pm and 4pm EST. Thank you for your understanding.

Banner image blurry and cuts off in desktop view

Banner image blurry and cuts off in desktop view

CMarsh
Tourist
6 0 2

Hello, I have tried importing various code to fix this and have gone to my theme developer but still having this issue. On mobile view, images look good but on desktop view, they get cut-off and are sometimes blurry.

For example, on desktop view, for this image, you cannot see the roller-skates.

Rollerskates (statement.co.nz)

Image below is how I want it to look on the banner.

Thanks for your help

 

CMarsh_0-1716635400695.png

 

Reply 1 (1)

Serj94
Shopify Partner
33 4 5

Try to crop your image to the same sizes ratio as the image container (square).

Here's how: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#crop-an-image

 

If the image in media is too wide or too height and on site it will be square - the exceeding image will be cropped.

Also, if the image is with height or width smaller than the container, it will be blurred in the shop, because css will stretch the image, to cover gaps in the container.

If I helped you - give the thumb up and mark it as the solution.
One free consultation, chech my profile.