How do I reduce the padding and size of my sections?

[weDebate]

[Note: The title of this post has been edited by a moderator.]

Is there a way to reduce the internal padding of the new section elements or to reduce the minimum size? I noticed you can click and drag to make them larger, but there's more blank space inside of a few than I'd like, so I would like to find a way to make them smaller than is currently working. 

Thanks!

EDIT:  I found the 2 portions of code I needed to change.

[kriskrost · Accepted solution]

You can add this code to "Settings" > "SEO" > Header if you want to remove the padding on all your "sections". If you have spacers at the top, this will make a difference though, so to get it with 0 padding you'll want to delete any spacers from the top. 

If you only one it on one page, you can add it from "Pages" > click on the page on the left > SEO Settings > Header

<style>
.content-wrap.container {
 margin-top: -20px !important;
}
</style>

Note: you probably won't be able to see these changes in the editor, you have to add the code, then publish and check your live site to see the effects.  

[Adam7 · Accepted solution]

Try adding this to Settings > SEO > Header Code:

<style>
.wsite-section-content > .container
{
	padding:10px !important;
}
</style>

[muk1 · Accepted solution]

I solved this for the Birdseye theme.

Go into the THEME tab and select Edit HTML / CSS.

Under the Styles folder, select _global.less.

Scroll down the code until you see /* Main Content + Sections */. For me this was on line #159.

Alter: (for me this was on line 173)

  .container {
    padding: 60px 40px;
  }

I changed mine to:

.container {
padding: 20px 20px;
}

Change it to what you need. The first number should be the top, the second number should be the bottom padding.

You won't see the changes in the preview window on the right. Just click Save in the top right and you're good.

Once again, this is only for the Birdseye theme.

[costumizeme · Accepted solution]

I tried this, it didn't work for me but I found the code that did work in my theme.   Here it is below.  Originally 10px was 25px, I reduced to 10 because 0 was just too close and I didn't feel like adding in all the spacers myself.  I hope this helps someone!!

}
#main-wrap .container {
padding: 10px 2em;
}

www.costumizeme.com

[MarijkeD]

I added the code as above, but it didn't change anything. The margins in the sections are way too big...

[Ada11]

That worked for me. Thank you, so much!

[Adam7]

Awesome! Glad to hear that.

[thebenbrooks]

Hey this solution didn't work for me and I'm looking to fix it still. Very large section padding top and bottom on my main page...looking for where to find this code in the CSS editor. There doesn't seem to be a .container object designated in the main.less.

[Content_creator]

Hi

I am finding that the sections completely throw out my pages because of excess padding. I tried community manager Adam's SEO code but it made no difference. The section I am using does not allow me to resize in any way. It is most frustrating.

Adam, please could you give further advice.

Thanks

[Adam7]

What site did you add it to, @Content_creator? It might need a small tweak to work for you. Also, it won't show in the editor and will only show on the live site, so make sure you publish after adding it and check there.

[tmahada]

@Adam

Yes I tried your code snippit in the seo header section and it reduces the padding on a live site within the element container. my issue is there is about 30px of white space between elements. It looks really bad especially with elements having different coloured background. I am using the "squared" theme. with sidebar navigation. 

[Adam7]

Can you post a link to your site, @tmahada? It'll help to see the site in action.

[hi31]

Hey so I am using the "Unbound-Unite" theme and while I have succeeded in making the margins larger, when I did, a scrolling bar came up at the bottom so now my page isn't centered. What should I do?

[Adam7]

What's the address of the site you're having trouble with, @hi3?

[tsugrad1]

This code worked perfect for me. Thanks

[JennVoiyoo]

nope thanks!

www.voiyoo.com

[HLC2]

this code worked for me. thanks

[thebenbrooks]

Hey I still need to figure this one out! Lend a hand?

[Adam7]

Can you give me a link to your main page, @thebenbrooks? It's possible it's a little different with your site.

[thebenbrooks]

absolutely, Adam. Great news, I used inspect in Chrome and found the value i needed to switch! It was part of the #footer object, oddly enough.

This particular site is elliotvision.weebly.com right now, but will be elliottvision.com in the next couple weeks here. Hopefully others see this and try the same tactic! Again, it ended up being "padding" in the #footer object.

[nierika1]

Hi,

I am not able to resolve this issue with "Unite" template using 

<style>
.content-wrap.container {
 margin-top: -20px !important;
}
</style>  

No matter what px value I put for the margin, nothing changes.

I am copying a site with an older template into this newer one ("unite") and all my sections/pages are messed up!

Any help will be greatly appreciated.

Thank you in advance,

Robert

[muk1 · Accepted solution]

I solved this for the Birdseye theme.

Go into the THEME tab and select Edit HTML / CSS.

Under the Styles folder, select _global.less.

Scroll down the code until you see /* Main Content + Sections */. For me this was on line #159.

Alter: (for me this was on line 173)

  .container {
    padding: 60px 40px;
  }

I changed mine to:

.container {
padding: 20px 20px;
}

Change it to what you need. The first number should be the top, the second number should be the bottom padding.

You won't see the changes in the preview window on the right. Just click Save in the top right and you're good.

Once again, this is only for the Birdseye theme.

[darrenb11]

Hi - This was great - worked for my desktop version but on mobile the padding is still really bad - specifically big spaces at the bottom. I am using birdseye. Any solutions? 

[kjb33]

Hi. I'm still having problems with this. I tried almost everything. I'm using the Clean Lines 2 Theme.

Thanks!

[gmj04]

I am also having the same issue.  Im using Unite 2 - Business