How to Decrease Section Padding in Squarespace 7.1 (Step-by-Step Guide)

Squarespace Tutorial
Written By Walid Hasan

Squarespace 7.1 is known for its understated, chic design, but sometimes that can mean that there’s too much white space between sections.

Squarespace gives a big ol' heaping of top and bottom padding on all its sections by default. This is great for readability and type flow, but there are times when you want more compact spacing, especially on modern, minimal designs or mobile-first experiences.

In this tutorial, I’ll show you how to decrease the section white space in Squarespace 7.1 with some very light custom CSS. No plugins or dev tools are required.

Why Adjust Section Padding?

That being said, let me articulate the reason why thousands of designers and website owners lower their section spacing:

  • Create a more compact layout

  • Eliminate unnecessary scrolling on mobile

  • Design sleeker landing pages

  • Visually connect related sections

  • Gain pixel-perfect layout control

How to Reduce Section Padding (Step-by-Step)

Step 1: Access the CSS Editor

  1. From your Squarespace dashboard, go to
    Pages → Custom code → Custom CSS

  2. Scroll to the CSS input field

Step 2: Add Global Padding Reduction CSS

This code will reduce whitespace (padding) for all sections site-wide:

Copied!

/* Reduce all section padding */
.page-section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

Customize the values (30px, 20px, 10px, 0px) to match your design goals.

Step 3: Target a Specific Section Only (Optional)

If you only want to reduce padding for one specific section, do this:

  1. Open any page → Click “Edit.”

  2. Hover over a section and click the gear icon

  3. Go to the Advanced tab and set a Section ID (e.g., tight-section)

  4. Then paste this into your Custom CSS:

Copied!

/* Reduce padding for a specific section */
section[data-section-id="your-id-here"] {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

Result: That section alone will have tighter spacing, without affecting others.

To reduce spacing on mobile screens only:

Copied!

@media screen and (max-width: 767px) {
  .page-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

This is especially useful for compressing space on phones or tablets.

Final Tips

  • Avoid removing all padding unless your layout is highly customized

  • Use different padding values for desktop vs. mobile

  • Combine this method with spacing blocks or layout tweaks for pixel-perfect results

  • Always preview changes on multiple screen sizes

Conclusion

Minimizing whitespace in Squarespace 7.1 is a quick and doable way to uplevel the design of your website. Whether you are working on a landing page, responsive layout, or any other type of design, using a little bit of CSS to fine-tune and improve the spacing of your designs is preferable to adding additional markup whenever you can.

It’s time to transform your site to make it look modern, clean, and user-friendly. This easy shift is a solid place to start.

Frequently Asked Questions (FAQs)

1. Why do I have such gaping white space between my sections on Squarespace 7.1?

In Squarespace 7.1, we have abundant top and bottom padding on all sections to ensure the content layout is really clean and readable. Although it is elegant, it can also lead to unnecessary white space, particularly on mobile.

Q2. Can I reduce section padding across my entire Squarespace website?
Yes! You can reduce padding globally by adding custom CSS to your Pages → Custom code → Custom CSS panel. Here’s a sample:

Copied!

.page-section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

You can adjust the pixel values to suit your design needs.

Q3. How can I reduce padding for only one specific section?
To target a specific section:

  1. Open the page in edit mode.

  2. Click the gear icon on the section.

  3. Add a Section ID like tight-section.

  4. Use this CSS in Custom CSS:

Copied!

section[data-section-id="your-id-here"] {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

Replace "your-id-here" with the actual ID.

4. Is it safe to remove all section padding completely?
It’s not recommended to remove all padding unless you have a custom layout. Too little spacing can hurt readability and user experience, especially on mobile.

5. Will this method work on all Squarespace 7.1 templates?
Yes, these CSS tweaks work across all Squarespace 7.1 templates because they share the same core structure and class naming.

6. How can I preview padding changes before publishing?
Always use the Preview feature in the Squarespace editor after adding your CSS. Be sure to check how your design looks on desktop, tablet, and mobile views.