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
30 3 4

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 the answer is useful, give it a like or mark as the accepted solution