How to get rid of white space?

Hi
I am using the Twenty Seventeen theme and on the front page, there seems to be a big white gap above the title of Each section and after the text below each section. How do i lessen this?

Same with the white gap between section Title and text of the first paragraph of each section.

Thanks

  • James Morris
    • WordPress Enthusiast

    Hello Sandra,

    Welcome to the WPMU DEV community! :slight_smile:

    If you are referring to the elements highlighted in the following screenshot (https://goo.gl/jqSCEr), the CSS you'll want to modify is as follows:

    @media screen and (min-width: 48em)
    .blog .site-main > article, .archive .site-main > article, .search .site-main > article {
        padding-bottom: 4em;
    }
    
    body:not(.twentyseventeen-front-page) .entry-header {
        padding: 1em 0;
    }

    You'll need to adjust the padding values to your desired amount. You can do this by adding your CSS to the Additional CSS section in Customizer (see screenshot: https://goo.gl/0datKK).

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • Ash
    • WordPress Hacker

    Hello there

    Try the following:

    .blog .site-main > article, .archive .site-main > article, .search .site-main > article {
        padding-bottom: 2em;
    }
    
    body:not(.twentyseventeen-front-page) .entry-header {
        padding: 0.5em 0;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    If it still doesn't work, please share your site URL so that we can check and suggest :slight_smile:

    Have a good day!

    Cheers
    Ash

  • Sandra
    • New Recruit

    Hi, it didn't work, but i found the solution, thanks anyway

    .page-one-column .panel-content .wrap {
    padding: 1em 0 .5em;
    }

    .page.page-one-column .entry-header,
    .twentyseventeen-front-page.page-one-column .entry-header,
    .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 1em;
    }

    My only problem with this code is that when you view the website on a smaller device other than desktop, there doesnt seem to be enough padding around the content.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.