- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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!
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@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).
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@daizyandco would be interested in this too
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@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).
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report

- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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;
}
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report