Brooklyn theme mobile, how can I remove the arrows and decrease height image to dots?

[JustJinn]

1. How can I remove the arrows entirely from product pages?

2. How can I reduce the space between the dots and also height between image and dots?

[dmwwebartisan]

@JustJinn 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[KetanKumar]

@JustJinn 

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

Please share your site URL,
So I will check and provide a solution here.

[JustJinn]

Shop: Dupahdecor.com

[KetanKumar]

@JustJinn 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-single__media-group-wrapper .slick__controls {    margin-top: 5px;}
.product-single__media-group-wrapper .slick__arrow {display: none !important;}
.product-single__meta {padding-top: 5px;}

[PeanutButter · Accepted solution]

hi @JustJinn 

You can add all the following code in Assets/theme.scss.liquid

1. To remove the arrows:

.product-single .slick__arrow {
    display: none !important;
}

2. To reduce the spacing between the dots:

Yo can change the 1rem to a smaller value if desired.  You can use decimals, line 0.8rem.

.slick-dots li,
.slick-dots button, 
.slick-dots a {
    width: 1rem;
}

3. To reduce the spacing between the dots and the image:

You can change the 15px value if desired to make the space bugger or smaller. Use whole numbers here.  The original margin was 25px

.product-single__media-group-wrapper .slick__controls {
    margin-top: 15px;
}

Please Like and Accept my answer if it fixed your issue

[JustJinn]

Super fast and super precise. Solved my issue,  but I have another smaller question. Is it possible to reduce the size of the dots as well?

[PeanutButter · Accepted solution]

Sure thing. You can reduce the size of the dots with the following.  Same as before, adjust the 7px value to the desired value

.product-single__media-group-wrapper .slick-dots li.slick-active a:before,
.product-single__media-group-wrapper .slick-dots li a:before {
    width: 7px;
    height: 7px;
}

If you also want to make the dots border thinner (I think that with smaller dots it looks better with a thinner border), instead of the above code use this:

.product-single__media-group-wrapper .slick-dots li.slick-active a:before,
.product-single__media-group-wrapper .slick-dots li a:before {
    width: 7px;
    height: 7px;
    border-width: 1px;
}

Please like my answer if you are happy with it 

[JustJinn]

You not only answered my question, but also made it better. The 2nd solution looks clean and works like a charm.