Stack slider indent arrows

(Lisa Sandler) #1

I’m hoping for some code to add… unless I am missing something in settings… I want to make the arrows not overlap the images in the slider… or have them outside the slider.
I have one on this page:

@willwood or anyone else if you can help.
thanks, Lisa

(Will Woodgate) #2

Stacks applies ‘overflow:hidden’ on all containers, so it is not feasible to pull elements outside of their container with negative margins or positioning. Otherwise the elements will simply be hidden from view.

What I think you will need to try instead is to apply padding to the left and right sides of the slider like this:

.bx-wrapper {
padding: 0 40px !important;

That will push the content in from the sides and provide enough space to display the arrows.

(Lisa Sandler) #3

@willwood, thank you. As usual, you have the perfect response and code.
Much appreciated.

(Lisa Sandler) #4

@willwood or anyone else…

Do you have some code to hide the nav arrows on iPhone sized-screens?
For example, slider on top of this page?


(Stuart) #5

Hi @LSPhoto

You could try:

@media only screen and (max-width: 500px) {    	
	.bx-controls.bx-has-controls-direction {
    	display: none;

I know you are not a programmer :wink: but just change the 500px to whichever mobile breakpoint suits your preferences.

You can get a list of common breakpoints here:

Hope it helps.

(Lisa Sandler) #6

Thank you, yes, I know enough to change the #s, just not the code itself. This works perfectly. The link you posted is really helpful. I’ve never seen that before. I’ll have to explore further :slight_smile: