Jump to content

How can I create more white space around my Banner inset?

Recommended Posts

  • Replies 6
  • Views 1.3k
  • Created
  • Last Reply

To apply to all inset sections (at all screen sizes), try adding this to your custom CSS:

.background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) .section-background {
  top: 3vw;
  right: 9vw;
  bottom: 3vw;
  left: 9vw;

This example increases the left/right margin size but keeps the top/bottom margins the same (3vw). Adjust the top/right/bottom/left settings as needed to get the white space you're looking for.

Link to comment
5 hours ago, scholarsayze said:

Is it possible to do something similar but for one specific section only? For example, what if I want to inset the first section left/right by 3vw, but then the second section even further left/right by 9vw?

Yep! You can target the section ID in the CSS. You can find the ID by inspecting the code, but it's way easier to use the Squarespace ID Finder Chrome extension. Here's the CSS for the particular example you asked about, with increased left/right margins on just the 2nd inset section ("Collection"):

[data-section-id="6024f8054a859919444821aa"] {
 .section-background {
    top: 3vw!important;
    right: 9vw!important;
    bottom: 3vw!important;
    left: 9vw!important;


Link to comment


This topic is now archived and is closed to further replies.

  • 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.