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?


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.