Move navigation buttons above gallery carousel

Hi all,

I'm trying to move the navigation buttons on a gallery carousel to above the images, and not below or centered , as is the standard Squarespace options. I can change the colour, icons, size of the buttons using CSS , but need some assistance to place the buttons side by side right aligned, and above the images.

Site is: https://orb-robin-wn9f.squarespace.com/

Password: 1ndigo

Example of what I'm trying to achieve is below...

If you set them to below you can use CSS to change the order of the elements to place the arrows at the top instead.

Thanks - how do I change the order , can you help with some example CSS please ?

The elements are in a flex grid, so using flex-direction: column-reverse; will be the CSS property you need. If you change the setup on your website I can provide the full code.

Great ! I've change the first image carousel so the navigation buttons are now at the bottom and right aligned, if you can let me know the CSS I need to change?

I'm happy with the testimonials slider having the buttons centered, but I guess the same logic will apply 

Thanks

Add this to Custom CSS:

.user-items-list-item-container {
  display: flex;
  flex-direction: column-reverse;
}

4 hours ago, CJoose said:

Thanks, that has worked and moved them to the top, above the images. How do i put some padding underneath them to move them up from the images ? Can you get the buttons to align with the title text of the carosuel ? Sorry to be a pain ...

 

 

I've worked out to create a gap between the buttons and images by using:

.arrows-bottom { margin-top: 40px;}

but, that is still not aligning with the title text, any ideas on that one ? Thx 

Potentially, but the title and arrows are in a different elements so will be difficult to align accurately and consistently.

Thanks for your help. Will see if I can remove the title .