how to remove big space for mobile on shopify brooklyn product page

Solved
Kevin1966
Excursionist
35 1 2

Hello. I'm using Brooklyn theme. There is a big gap between picture and slide dots on product page for mobile when more than 1 pictures. If single photo, looks normal.  It looks like a thumbnail space , but shows blank.  How to remove it?

Screenshot_20200923_161434_com.android.chrome.jpg

Accepted Solution (1)
UmairA
Shopify Partner
1106 101 223

This is an accepted solution.

@Kevin1966 ,

Add the following code to your theme.scss.liquid file

@media only screen and (max-width: 480px) {
.template-product .product-single__media-group {
height: 55% !important;
}
}

Let me know if you need help with anything else.

Umair Abbas

View solution in original post

Replies 6 (6)
UmairA
Shopify Partner
1106 101 223

Hi @Kevin1966 ,

Please share your store URL so I can take a closer look and post a solution here. Thanks

Umair Abbas

Kevin1966
Excursionist
35 1 2
Kevin1966
Excursionist
35 1 2

Thank you , should try on mobile.

 

UmairA
Shopify Partner
1106 101 223

This is an accepted solution.

@Kevin1966 ,

Add the following code to your theme.scss.liquid file

@media only screen and (max-width: 480px) {
.template-product .product-single__media-group {
height: 55% !important;
}
}

Let me know if you need help with anything else.

Umair Abbas

Kevin1966
Excursionist
35 1 2

Grea, it works! Thank you vey much!

Elad1
Tourist
3 0 1

where can i add this code?

i tried to paste him on the bottom of the file, didnt work

thank you