Jump to content

Adding Padding around Carousel slides

Go to solution Solved by melody495,

Recommended Posts

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!

Screenshot 2023-10-26 at 09.53.41.png

Link to comment

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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

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

Link to comment
  • Solution

@Nimay I tested this on your website, so these are the  elements on your website. Can you add !important after each of the css styling and see?

Below new code

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

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

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

 

Let me know how it goes.

 

Edit: to answer your question on how to find your element name, you right click on the component and click inspect, you'll see the html. If you're not familiar with it then you'll need to read up on it, and be mindful of the parent/child relationships and how they behave, and some best practice. 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.