How do I remove empty white space on the left and right of my posts

  • Unknown's avatar
    gamesandmoviesreviewed · Member ·

    Hi,
    Is there a way to reduce the empty white space on the left and right side of a post or a page? Right now, there is about 4″ of white empty space that I’m not using and I would like to fill with the content that’s already displayed. Is that a possibility? If so, how?

    Help would be much appreciated!

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • nuk4040 · Staff ·

    Hi there,

    Yes, this is possible. You can reduce the empty space by inserting additional CSS code. Here’s how:

    Go to My Sites > Appearance > Additional CSS

    Insert the code below and Save.

    .no-sidebar:not(.page-template-full-width-page):not(.page-template-front-page) .content-area {
    max-width: 100% !important;
    }

    I hope this helps.

  • Unknown's avatar
    gamesandmoviesreviewed · Member ·

    Unfortunately, that seems to have no effect. There’s still big empty white space on the left and right of my posts.

  • kokkieh · Staff ·

    Hi there,

    Removing that whitespace, i.e. making your content area wider, may result in your text being less readable:

    Research has shows the human eye has a limit to the number of characters it can comfortably read in a single line. That’s why books are the width they are, why newspapers on wider pages print their content in columns, and why most websites restrict the width of the content area. Making a textarea wider causes readers’ eyes to get tired faster, and increases the chance that someone can lose their place when moving from the end of one line to the start of the next.

    So I don’t recommend making your textarea wider – it’s fine for front-page content which is usually just a couple sentences at a time, but once we get to long paragraphs in a text-heavy post the readability issues really become noticeable.

    I see you use a lot of images throughout your posts. Have you considered just making the images full-width instead, using the alignment options for the image block in the editor? That will make the whitespace less obvious, and breaking up the text content in this way also helps with readability.

    If you still want to force the content area wider, the code above will work, but it’s not working on your site because your /* Headings */ code you already have in there is incomplete – you’re missing three closing } characters in that CSS. I’ve added those in for you, as those braces not being there will prevent any further CSS you add from working.

    That said, the code above is not the best option here – using !important should generally be avoided, as the moment you use that it will override any and all future CSS you add that targets the same selectors. This code will have the same end result, but without limiting your ability to make future changes:

    /* Make content area on single posts wider */
.no-sidebar:not(.page-template-full-width-page):not(.page-template-front-page) .content-area {
	max-width: none;
}

    You can also replace the none value in that code with a percentage or fixed pixel value if you prefer to just have it a little wider, rather than full-width. The current/default value is 685px, so anything over that will result in your content area getting wider.

  • Unknown's avatar
    gamesandmoviesreviewed · Member ·

    Thank you very much kokkieh!

    I never considered that the way the default width is set up might be for a reason. I appreciate you letting me know this as I likely won’t change it now. However, your suggestion for the images sounds great!

    Thanks again!

  • The topic ‘How do I remove empty white space on the left and right of my posts’ is closed to new replies.