Jump to content

Adjusting margins/padding for accordion blocks CSS

Recommended Posts

Site URL: https://www.kdigitalstudio.com/how-to-create-digital-products

So I've managed to style the accordion blocks like how I envisioned on my course page, but it's still not quite perfect. I would like it if there are more padding between the text and the rounded rectangle/rectangle of each individual dropdown. Likewise, I'd like more padding between the edge of rounded rectangle and the down arrow. How can I achieve this with CSS?

1136927537_ScreenShot2022-04-02at7_51_06PM.thumb.png.bd1bdedc1c2867a2913648bfe7af5187.png

Here's the code I have so far:

.sqs-block-accordion .accordion-item__title-wrapper {background: #ffffff;
  margin: 15px;
  padding: 0px;
  border: 1px solid black;
  border-radius: 25px;
  flex: 1;}

.sqs-block-accordion .accordion-item__description {
  margin-left: 35px
}

Link to comment

Figured out -- posting what I did for anyone else who may need help with this in the future.

 

//moving over the dropdown indicator //
.sqs-block-accordion .accordion-icon-container {
  margin-right: 20px;
}

//moving over the accordion title//
.sqs-block-accordion .accordion-item__title {
  margin-left: 20px;
}

 

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.