Hi Evan,

Thank you for getting in touch.

From my end, I can see that the buttons are vertically centered in the gallery. Here's a screenshot showing the same. Also note in the screenshot, the CSS for the next/previous buttons has been set to 50% from the top of the image gallery.

I hope that clarifies your query.

Cheers,

I hope that clarifies your query.

Cheers,

Hi Evan,

Thank you for getting back to us and for the clarification.

To move the arrows 60px from the edges, add this into the Custom CSS box in your Salient Theme Options panel:

.nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button.previous {
  left: 60px !important;
}

.nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button.next {
  right: 60px !important;
}

Try that and let us know how it goes.

Thanks,

Hey Again,

Thanks for reaching out! . Had to work some CSS magic on this :) .

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

.nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button.next {
    right: 50% !important;
    transform: translateX(48vw);
}

.nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button.previous {
    left: 50% !important;
    transform: translateX(-48vw);
}

Thanks

Best,