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

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-hxrkj

Hello, is it possible to add more padding around a banner that has 'inset' setting so there is more white space around the banner? Please see image 1, current status, and image 2 how I would like the visual.

Page = https://bluebird-porcupine-yzdg.squarespace.com/home-hxrkj

Pword = bluebird

Many thanks,

Best,

Faiz

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.

Wow! Thank you awesome fix!

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?

Many thanks,

Best,

Faiz

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;
  }
}

Thank you very much for the help!

I tried to add the code, saved it but it seems there is no change to that section, please see attached.

Please could you take a look your side?

Also, can I use this code on any page on my site for future use?

Many thanks,

Best,

Faiz

8 minutes ago, scholarsayze said:

I tried to add the code, saved it but it seems there is no change to that section, please see attached.

Sorry about that, I just updated the code in my previous comment and it should work now! Try again and let me know if not.

AWESOME!!! Thank you SO much that's pretty cool!! Now I can use this styling across my site at specific banners! Just what I needed, thank you again!! 💯

"Teach me code please!" haha!