Adding Padding around Carousel slides

Hi everyone,

I am trying to move the navigation arrows in my carousel more to the side so that they don't overlap with the actual carousel slides. Since this is not possible within the basic editor I have tried to achieve it using CSS but have not found a solution so far.

The only thing I have done so far is adding a margin to the section (see code below). But this now just allows me to move the arrows to the edge of the carousel section (red lines in the attached picture). I would like to have the arrows outside of the section or have a margin/padding of the slides within the section so that the I can move the arrows within that frame.

section[data-section-id="62d8f41af11c953b83ab81a4"] {
    margin-left: 10vw;
    margin-right: 10vw;
}

Any suggestions?

URL: https://plane-llama-a88g.squarespace.com/myxoees
PW: myxobacteria

Thanks a lot for your help in advance!

Hi, probably don't want to change the section margin. Try the below code in your custom css?

// makes the slideshow part smaller
.user-items-list-carousel__gutter {
	padding-left: 10vw;
	padding-right: 10vw;
}

// Gives more padding between the arrows and the edge of the container
.user-items-list-carousel__arrow-wrapper--left {
	padding-left: 2%;
}

user-items-list-carousel__arrow-wrapper--right {
	padding-right: 2%;
}

Let me know how it goes.

Hi @melody495,

Thanks a lot for your answer!
I have tried adding your code but unfortunately it does not make the slideshow part smaller. The only thing that was changed was moving the left arrow a bit more inside.

I was wondering how I can find out what the proper element name is of a specific element that I am trying to change (i.e. ".user-items-list-carousel__gutter"). Is there a way to know which is the correct name for a specific element?

Since the padding changes of your code were not performed I assume that the element name may be incorrect?

Curious about your suggestions!

Nicola

Hi @melody495

The !important addition indeed solved it! (plus adding the missing dot in the last paragraph before user-items... ) 🙂

Thanks a lot for your help! 
And also for the comment regarding finding element names.

Cheers,

Nicola

10 minutes ago, Nimay said:

The !important addition indeed solved it! (plus adding the missing dot in the last paragraph before user-items... ) 🙂
 

Ah good spot about the missing dot! that was probably the issue. 

You are welcome 🙂 glad it worked for you.