x

Top and bottom padding of sections

I've read every community post and tried everything but cannot figure out how to remove the padding on sections. I want zero (0px) space for the top and bottom padding. Please help!

1,619 Views
Message 1 of 6
Report
1 Best Answer

Best Answer

@daizyandco @whitemonkey This would require a modification to the "content" css class. In the page "Header Types" html in the Code Editor (Theme > Edit HTML/CSS - click desired Header Type), you'll see content container divs within Weebly sections (including banner and footer zones) and these have the container class (<div class="container"> Content stuff here </div>).

In the site's css, the padding of the container class determines the padding around the content within a section. So, for example, this css:

.container {
  padding: 50px 20px;
}

will add 50px of padding above and below the section content and 20px of padding to each of the left and right. If you want zero top and bottom padding (and this will affect every single section in your site), you'd change "50px" to "0". The tricky part is trying to affect a single section. Because Weebly sections don't have user-defined classes or ids, you can't target a specific section. In this case, it is necessary to get into the Header Type html and start monkeying around with the page sections manually and add your own Mustache content elements. If you didn't understand that last sentence, it's probably not something you're going to do.

A less elegant approach would be to zero out your top and bottom padding in the css for the container class (Theme > Edit HTML/CSS - css code is the default code in the right-hand code pane; search for ".container" in that pane) and manually add padding in the Site Editor (best approach is to NOT use the spacer element but instead use the line separator where you can specifically set the pixel amount of spacing above and below the line and then turn off the line - this is superior to the spacer element because you'll know exactly how many pixels of space you have with the line separator which you will not know with the spacer element).

View Best Answer >

1,583 Views
Message 4 of 6
Report
5 REPLIES 5

@daizyandco   would be interested in this too

1,607 Views
Message 4 of 6
Report

Best Answer

@daizyandco @whitemonkey This would require a modification to the "content" css class. In the page "Header Types" html in the Code Editor (Theme > Edit HTML/CSS - click desired Header Type), you'll see content container divs within Weebly sections (including banner and footer zones) and these have the container class (<div class="container"> Content stuff here </div>).

In the site's css, the padding of the container class determines the padding around the content within a section. So, for example, this css:

.container {
  padding: 50px 20px;
}

will add 50px of padding above and below the section content and 20px of padding to each of the left and right. If you want zero top and bottom padding (and this will affect every single section in your site), you'd change "50px" to "0". The tricky part is trying to affect a single section. Because Weebly sections don't have user-defined classes or ids, you can't target a specific section. In this case, it is necessary to get into the Header Type html and start monkeying around with the page sections manually and add your own Mustache content elements. If you didn't understand that last sentence, it's probably not something you're going to do.

A less elegant approach would be to zero out your top and bottom padding in the css for the container class (Theme > Edit HTML/CSS - css code is the default code in the right-hand code pane; search for ".container" in that pane) and manually add padding in the Site Editor (best approach is to NOT use the spacer element but instead use the line separator where you can specifically set the pixel amount of spacing above and below the line and then turn off the line - this is superior to the spacer element because you'll know exactly how many pixels of space you have with the line separator which you will not know with the spacer element).

1,584 Views
Message 4 of 6
Report

Hi there - 

Hope someone can help, I'm now seeing a strange tiny gap between the top of my pages. dunno what's going on but I don't like it and can't figure out how to get rid of it! 

Any help appreciated: juniper-clay.com

Thanks in advance, 

Kristina

image

1,373 Views
Message 6 of 6
Report
Square

Hi @Ojaigooddog 👋

I moved your post over to this thread where more members have asked a similar question. Please check out the pinned post for information on how to override the default setting. 

1,358 Views
Message 6 of 6
Report

On my template, my sections padding was on line 175 in the global.less file.  The section of code that I altered looks like this (see below); once I changed the padding, I could modify the section padding to my liking:

.container {
padding: 45px 40px;
max-width: 1366px;
}

1,233 Views
Message 7 of 6
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.