[Resolved] Add padding to left and right of single post content

Home Forums Support [Resolved] Add padding to left and right of single post content

Home Forums Support Add padding to left and right of single post content

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2354744
    Fergal

    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

    #2354769
    Fernando
    Customer Support

    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;
    }
    #2355273
    Fergal

    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

    #2355874
    Fernando
    Customer Support

    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;
    }
    #2355910
    Fergal

    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?

    View post on imgur.com

    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.

    #2355985
    Fernando
    Customer Support

    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.

    #2356643
    Fergal

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

    Thanks Fernando!

    #2357006
    Fernando
    Customer Support

    You’re welcome Fergal!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.