Content area width – how to shift to the left and make wider?

  • Unknown's avatar
    traumamamadrama · Member ·

    Here is my website: https://traumamamadrama.com/ I’d like the center column where the content is located to extend farther to the left while leaving the right margin where it is (so that the content area is wider) and am not sure if I can do that with CSS? And is there a way to do that on all the pages of the website at once, or do I need to go into each page and change it?

    Here is my website: https://traumamamadrama.com/ Thanks! :)

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, let’s give the following a try. You can adjust the max width value and it will widen things but keep the content/sidebar area centered. 

    .entry-hero-wrapper, .hentry-wrapper, .site-content-wrapper, .site-footer-wrapper, .site-header-wrapper, .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .widget-area-wrapper {
    max-width: 56.25rem;
}

    One thing to keep in mind when it comes to text is that to keep things as readable as possible, it is best to keep the text between 500 and 750 pixels in width. Wider than that and it becomes more difficult for a reader’s eye to scan to the beginning of the next line. With the 56.25rem width, that puts the content at about 580px, so it is on the lower end of that range, so you can make things wider without compromising readability.

  • Unknown's avatar
    traumamamadrama · Member ·

    Thank you! Here it is at 65 rem: https://traumamamadrama.com/

    Is there a way I can make the right side of the text end a bit sooner, or move the sidebar over to the right a bit so there’s more space between them?

  • Unknown's avatar
    thesacredpath · Member ·

    Yes, we can do that. There is currently 1em of padding on the right side of the content area. Add the following and you can adjust my example 1.5em value as desired. 

    body:not(.no-sidebar) .content-area {
    padding-right: 1.5em;
}
  • Unknown's avatar
    traumamamadrama · Member ·

    Thank you!

    Here it is with a 75rem and 2.5 em. If you have a chance to comment again, would you give me an opinion as to its readability? I linked to the blog because that is where it’s most important for me:

    https://traumamamadrama.com/blog-2/

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome and that looks good to me. The content comes out at about 675px in maximum width.

  • The topic ‘Content area width – how to shift to the left and make wider?’ is closed to new replies.