Docs

[Clement L]

Hi,

I have added some arrows to my sliders and when reducing the size of the window the slider is responsive and working well but the arrows start going over my images.

Could you please help figure this one out? I would like the arrows to stay on each sides of my images or go under when being viewed on smaller devices.

Many thanks,
Clement.

http://www.clementlauchardphotography.com/events/
http://www.clementlauchardphotography.com/behind-the-scenes/
http://www.clementlauchardphotography.com/weddings/

[Rupok]

Hey Clement,

There is no space on the smaller device, so the icons are overlapping. You should add some padding to get the expected result.

Cheers!

[Clement L]

Hi,

Thank you very much for your response. Is there anyway I could have them placed below the slideshow when used with smaller device instead of on the slideshow?

Many thanks,
Clement.

[Clement L]

Also, when viewed on a iPhone the arrows are next to each other and very close, so very difficult to use..

Thank you,
Clement.

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 480px) {
.tp-leftarrow.tparrows {
	-webkit-transform: none !important;
	transform: none !important;
	left: -25px !important;
	top: calc(50% - 70px) !important;
}
.tp-rightarrow.tparrows {
	-webkit-transform: none !important;
	transform: none !important;
	right: -15px;
	left: auto !important;
	top: calc(50% - 70px) !important;
}
}

Hope this helps.

Cheers!

[Author]

Posts