mobile image not displaying correctly (sides of image cut off)

Store Design
1

Hi,

I’ve uploaded a mobile image (a square 2000 x 2000) to our website, but it’s not displaying the full contents of the image. I’ve made sure the dimensions are correct, the preview shows it correctly, but the live site cuts off the image?

www.goodwinsmith.co.uk

Any ideas?

Tim

1 Like
2

@london2020

Welcome to the Shopify community!
and Thanks for your Good question.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 740px) {
#shopify-section-1480972784545 .slide-image-cont {background-size: contain !important;}
}
3

Hi @KetanKumar , this is great and has worked, but there is a big space at
the top and the bottom of the image, how do I reduce this? [image:
Unknown-3.jpeg]

4

@london2020

Yes, please try this code

@media only screen and (max-width: 740px) {
#shopify-section-1480972784545 .slide-image-cont {
max-height: 300px;
min-height: 300px;
}
}
1 Like
5

thanks for your help, this has worked :-).

1 Like
6

@london2020

Thanks for the feedback and update