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

[Queso]

Good to hear you've made the change! What code are you using?

[TH34]

What code did you use to get the shrinkage you needed?

[-ANTHONY-]

I would love to know as well.

[TH34]

So how did you do this?

[alxalvrz]

What code did you use in the custom editor?

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

[caninevalley]

I'm using Birdseye, that code didn't work, where to change it in the HTML? There is too much padding in secitons. Thanks!

[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

[Baile]

Hello, really love your website. Is this a weebly template your using? Highley customized from the looks of it. Just curious what you started with. Not at all to copy by no means, just looking at the diffefent avenues of design, thats all. Great job by the way. 

[AlexPub]

Re: previous comments, I searched for #main-wrap .container in main.less and reduced the last padding from 5 to 3 (all the others were set to 3) and this worked perfectly. Thanks

[HelenB11]

I am using Birdseye 2 Portfolio Themefound the css in Global-less (Line 175) where the container padding was 60px 20px. 

I changed the top padding from 60 to 6px so I could use a small text element as a hyperlinked banner image "caption" sitting close under the banner. Then just added spacers to push back out the top padding on the rest of my sections.

It's still not working so well in mobile view.  www.kangaroomatters.org

Now I need to find out how to add the og: tag to my banner image so it is the image shared in on social media pages, and not an image further down the page.

[Stevep93]

This fixed it for me - thanks 

[gripp]

This worked for me, thanks!

[ch41]

I added that code in the SEO but that did not work for me.  

[JennVoiyoo]

Sadly, didn't do anything that I can see... and it wanted me to save the theme after. Ugh, this is so frustrating! Just want to make the Sections shorter! Thanks!

[DC21]

Hi,

Would you care sharing - running in to the same problem...

Thanks in advance

[DC21]

If anyone's still having problems with this, please reply to this comment and I'll guide you to where you need to alter the CSS.

[GJNOL]

Would love some help on reducing the minimum size!

[dyanpeters]

I'm still running into this problem? Can anyone post the solution? I've tried changing code all over the place with no luck!

[Adam7 · Accepted solution]

Try adding this to Settings > SEO > Header Code:

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