How to adjust image size in CSS for mobile view?

Store Design
1

Hello,

I am putting the finishing touches on my store and noticed that while in mobile orientation the photos got smaller and so a sheer background appeared. Is there a code or way to fix this? @KetanKumar

099DE47E-DFB5-4C3E-86B7-9A5285FE0E17.png
099DE47E-DFB5-4C3E-86B7-9A5285FE0E17.png1284×2778 187 KB

2

@Nylahyasmeen

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@KetanKumar

Thank you!

https://eden-stone-llc.myshopify.com

4

Hi @Nylahyasmeen , Happy to help you with the issue

Follow these steps :

@media(max-width: 767px){
.product--image {
    transform: scale(1.5);
}
}
  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
5

@SagarSukhanandi

Hey there, I followed the directions but unfortunately it is still the same

6

@Nylahyasmeen

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-product__image-link {background-color: transparent;}
7

Hi @Nylahyasmeen

For me, it’s working fine. Please check the image.

Capture.PNG
Capture.PNG580×427 16.1 KB

Is it possible to add me as a staff so I can check the code?

8

Thanks so much. It worked! @KetanKumar @SagarSukhanandi