Product gallery image arrows (Debut theme)

[Matt_W89]

Hey guys,

For some reason when I view my shop through a mobile device, the arrows for the gallery appear above and below the gallery icons (picture attached).

I'm assuming this isn't right as it's so messy. Is it something to do with the borders? I want the arrows to be to the left and right of the gallery icons, not above and below.

Please can someone help with a solution or workaround?

Thank you! :)

Matt

[KetanKumar]

Hello, @Matt_W89 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

[JoshuaSarros]

Hey Matt_W89,

It looks like it could be because of the borders, are they something you have added in?

I'd be happy to have a look at it and see if there's anything I can notice that might be an issue if I can grab your store URL from you? It will be easier to work out what's happening if I can see it properly on the page.

Josh

[Matt_W89]

Hey Josh,

Of course :) my website is Bamboosmiths.com.

I haven’t added them in, I just uploaded the images via the product pages and the slideshow with arrows is the default presentation.

thank you!

Matt

[KetanKumar · Accepted solution]

@Matt_W89 

Thanks for URL.

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

@media only screen and (max-width: 748px) {
.thumbnails-wrapper {
position: relative;

.thumbnails-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
}

.thumbnails-slider__prev {
    left: -30px;
}
.thumbnails-slider__next {
    right: -40px;
}
}
}

[Matt_W89]

Thank you so much @KetanKumar ,

You solved it for me and it's PERFECT.

Just one small correction to your code, you missed out a '.' on: 

thumbnails-slider__prev {
    left: -30px;

Just need to change it to:

.thumbnails-slider__prev {
    left: -30px;

 Just posting that correction for anybody that may see this who needs help - not in any way a criticism!

Once again @KetanKumar , you are an absolute diamond!

Best,

Matt

[KetanKumar]

@Matt_W89 

Thanks for update.

yes we're update code

[jckacova]

Hi there,

How can I add arrows on image to click for next pic? Could you please help me. Thanks

This is my web: jckacova.com

[KetanKumar]

@jckacova 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

[plus-size-cloth]

This code didn't work for me? I put it at the very end of the theme.scss.liquid file .  Help ?

My site is https://plus-size-clothing.com check any product page.