Try this for centering:
.s201_prev_next.s201_style_1 {
text-align: center;
}
And for making the arrows bolder:
.s201_prev_next.s201_style_1 .s201_prev:after, .s201_prev_next.s201_style_1 .s201_next:after {
border-width: 3px;
}
(These go into APPEARANCE => CUSTOMIZE => ADDITIONAL CSS)
Hi @gappiah, thanks for the quick response, the second script work very well, thank you.
For the first one center, unfortunately, it doesn’t move. Also, I tried align-items and align-content and nothing move.
Thanks for your time
I can see the arrows centered on your live site. I’ll recommend you open in a guest or private window to check this.
Also, I tried align-items and align-content and nothing move.
These are flexbox properties and require a flexbox container to work. Your arrows are not in a flexbox container, so these properties will have no effect.
Hi again, you’re right, it works. Thank you so much.
I am very happy.
@gappiah Hi, is there a way to have the arrows bigger?
Thanks again
There is, but we have to tweak a number of properties to get exactly what you want.
First, we have to increase the size of the “Dark Charcoal” background box containing the arrows. The code below doubles the width and height from their default of 25px:
.s201_prev_next.s201_style_1 .s201_prev, .s201_prev_next.s201_style_1 .s201_next {
width: 50px;
height: 50px;
}
Next, we have to increase the sizes of the two arrows, and reposition them from the top and left towards the center:
.s201_prev_next.s201_style_1 .s201_prev:after, .s201_prev_next.s201_style_1 .s201_next:after {
width: 20px;
height: 20px;
left: 17.5px;
top: 15.5px;
}
The right arrow may need finer tuning:
.s201_prev_next.s201_style_1 .s201_next:after {
left: 10px;
}
And if you want to increase the thickness of the arrow, increase the border-width value in the earlier code.
NB: You may have to alter all the values given above to get the exact size (length, height & thickness) of the arrow you desire.
Hi thank you so much, it works great Thanks again
