Layout

How do I change the section padding in Squarespace?

Each section in Squarespace 7.1 uses the .page-section class. You can override the default padding globally or target specific sections by their data-section-id attribute.

To target a specific section, inspect the element to find its data-section-id and use an attribute selector. This lets you set different padding on different sections.

/* Global section padding */
.page-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Specific section by ID */
[data-section-id="6501abc123def"] {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Reduce padding on mobile */
@media screen and (max-width: 767px) {
  .page-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

Calculate section spacing with our Spacing CalculatorTry it free →

Related Questions

How do I make a section full width in Squarespace?

How do I hide a section on mobile in Squarespace?

How do I center content vertically in a Squarespace section?

How do I add a divider line between sections in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →