• Resolved theboyellis

    (@theboyellis)


    I’m tweaking my new WordPress site and would like to remove the white space which adorns posts.

    Here’s an example: http://thebeachballer.com/2015/09/04/apple-music-ui-what-the-fuss/

    The gaps bothering me are:

    – between the header and ‘posted by’
    – surrounding ‘filed under’
    – surrounding ‘previous post’
    – between the comment section and footer

    It’s all a little too spaced out!

    Could any of you lovely helpful people give me a bit of guidance on what exactly I need to edit?

    Thanks in advance πŸ™‚

Viewing 15 replies - 1 through 15 (of 16 total)
  • Linda

    (@lindamork)

    Automattic Happiness Engineer

    Hey there!

    Happy to give you a hand. Can you tell me though – do you have a child theme installed? Or Jetpack? This will involve some changes to the CSS and we don’t want them to disappear at the next theme update. Let me know and we can take it from there.

    Cheers!

    Thread Starter theboyellis

    (@theboyellis)

    Thank you!

    I have Jetpack installed, but I’m not using a child theme. I’ve already made a couple of minor changes to CSS, therefore I’m guessing your next point is that I need to do something to preserve my changes…? πŸ™‚

    I’m new to that too, I’m afraid!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s just copying and pasting your changes into the Jetpack ‘Edit CSS’ option.
    https://jetpack.me/support/custom-css/

    Three options for you:

    1) Go like the before posts

    2) Create spacing sections in nested tables, i often do that for responsive concerns,

    3) Try either web developer tools in Chrome or the equivalent in Firefox, i have a preference for the firefox one, then you can direclty see a “quite” render of your design while playing with size

    All are very valid, because responsive is NEVER perfect,

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    – between the header and ‘posted by’

    Add this:

    .site-content {
        padding-bottom: 1em;
        padding-top: 3em;
    }

    – surrounding ‘filed under’

    Add this:

    .single .entry-footer {
        padding-top: 0;
    }
    
    .site-content .post,
    .site-content .type-attachment,
    .search-results .site-content .page {
        margin-bottom: 0;
        padding-bottom: 3em;
    }

    – surrounding ‘previous post’

    #nav-single,
    #nav-image,
    #nav-comments {
        padding-bottom: 0;
    }

    – between the comment section and footer

    #colophon {
        padding-top: 2em;
    }

    ps: it’s not too spaced to me, look at medium.com posts – but take care of some unecessary spaces on the vertical spaces i think

    and yes andrew did what i suggested πŸ™‚

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Well, I did what theboyellis suggested.

    All that will work if your css is rather clear with no fluffles (font-size and so)

    Thread Starter theboyellis

    (@theboyellis)

    Gotcha, and done – thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not stopping you from providing a better solution.

    Well i don’t know theboyellis, obviously a master at front-end design, without knowning theme and so, all that will just look great.

    It does, i see it now, it’s all balanced and cool,

    You just need to work on the lower-level blocks for it to be perfect,

    Thread Starter theboyellis

    (@theboyellis)

    You wonderful people – thanks very much.

    Possibly needs a little more tweaking, but looks so much better now.

Viewing 15 replies - 1 through 15 (of 16 total)

The topic ‘Removing white space’ is closed to new replies.