Site logo

Archived topic

Add padding to left and right of single post content

7 replies · Started by Fergal on September 26, 2022

Viewing posts 1–8 of 8

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.

Great that helps. I went the customizer and -30px override route and it seems to be working perfectly.

Thanks Fernando!

You're welcome Fergal!

This archived topic is closed to new replies.