Archived topic
Add padding to left and right of single post content
7 replies · Started by Fergal on September 26, 2022
Hey there,
Can you please help me add 30 px of padding to the left and right of my content for single posts?
Thanks,
Fergal
Hi Fergal,
If it's for the entire site, you can do so in Appearance > Customize > Layout > Container.
Otherwise, you can try this CSS:
body.single .site-content .site-main {
padding-left: 30px;
padding-right: 30px;
}
Hey Fernando,
I think for the entire site is ideal, however there are some elements that I would like to not have 30px padding applied to them.
For instance, I added left and right padding in the customizer, but would like to remove it for the newsletter container. Can something like the below override that padding? This code isn't working, but hopefully helps point out what I'd like to achieve.
.gb-container.my_newsletter_container {
padding-left: 0;
padding-right: 0;
}
Thanks
You'll need to add the padding to each Block then exclude that specific Block. Example:
main#main > *:not(.my_newsletter_container) {
padding-left: 30px;
padding-right: 30px;
}
Hey Fernando,
Thanks for your response. Could use a bit of clarification though please.
Can I use the following customizer settings then just override the newsletter block padding and set to 0? Is that what using your latest recommendation would accomplish?
https://imgur.com/a/3Y1AiQ4
Or should I remove the 30 padding left and right from the customizer. Then add left/right padding to every element as needed as well as use this css?:
body.single .site-content .site-main {
padding-left: 30px;
padding-right: 30px;
}
Thanks for your help.
Well, you can override the padding in the customizer by doing this for instance:
.gb-container.my_newsletter_container {
margin-left: -30px;
margin-right: -30px;
}
The code I provided here adds paddings to all elements and excludes your specific container: https://generatepress.com/forums/topic/add-padding-to-left-and-right-of-single-post-content/#post-2355874
Either should work. It's up to your preference.
Great that helps. I went the customizer and -30px override route and it seems to be working perfectly.
Thanks Fernando!
You're welcome Fergal!