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

[Adam7]

What section on your site are you trying to reduce the padding of, @gmj04?

[gmj04]

The distance between the menu and top of page (header) is too great as stated above.  Please take a look at my site and see what you think? https://www.josephcare.net/ 

I have exhausted all the options above and to no avail.

[JennVoiyoo]

I would love to make the sections shorter. So when I grab the little blue dot I can tighten it up even more. Would so love to fix this!! I tried changing the padding in a number of places, but had no luck. My code also says Birdseye. Can you click on a section on the website and have it select the code somehow? thanks!!

www.voiyoo.com

[Itetero]

I am really struggling with this, using slick business theme. tried the header code in SEO but that doen'st seem to have done anything... cannot find anything in the main.less file that looks like section padding? Please help

[Bernadette3]

Can you post the url to your site @Itetero Thanks!

[splitmerge]

I use a Bamboo Theme so this may be different for you but I was able to change the padding for ALL sections on ALL pages by going to Themes > Edit HTML/CSS, finding the code below and changing the padding value. I did not see the change until I published the site.

/* ========== Main Content ========== */
#main-container .main{
padding: 10px 0;

[Bernadette3]

Thanks for sharing, @splitmerge

[AshleyMickle]

I need help doing this.  

[limpet · Accepted solution]

Guys,

its the max width property you need to set to shirnk the left/right margins

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

[Ukochu]

Hello!

I'm having trouble getting rid of extra spacing from top and bottome of the elemets.

Although my spacing is "0" in the top and bottom of the images or other elements, there is still extra space and make the areas too thick, especially very bottom of the page. I read other posts realted to this kind of issue. But I couldn't figure out or they didn't apply to my case. How can I change the hight of the areas? I'm not so familar about codes. So it will be a huge help if you can advise me step by step.

Thanks!

[Bernadette3]

Hi @Ukochu 👋

I moved your post over to this thread where other community members are discussing the topic. 

Please check out the pinned answer at the top of the page for more information.

This type of change does require custom code edits, however, Weebly employees are not able to assist with coding questions. Please make sure you are comfortable making these type of edits before attempting any of these changes. Adding the code snippet to Settings > SEO > Header is a much safer route since you can easily remove the code if it causes a problem with the site functioning properly. 

[Ukochu]

Thank you, @Bernadette !

The code I found in this post worked for desk top view.

On the mobile view, the spaces were not consistatnly discreased like desk top view. Also, space between paragraph title and paragraph tile on some web pages are not consistant, either. Some of them look perfect, the rest too much space between.

How can I fix?

[mutumak]

Hi, im trying to reduce the padding on my site but cant seem to find a solution, any help please?

https://designersafari.com/index.html

[Bernadette3]

Hi there. Weebly employees are not able to assist with custom code, but have you tried searching here in the community? I know there's a handful of threads where people have asked this question. 😊

I moved your post over to one of these threads, but if you are not able to find the solution you can try a different thread.