[Resolved] How to change width of content area without affecting sidebar width?

Home Forums Support How to change width of content area without affecting sidebar width?

  • This topic has 11 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1333379
    Katherine

    Hi,

    We are using a right sidebar on just our single post pages. In these pages, I would like to adjust the width of the content so that the text displays a max of 75-80 characters per line for readability.

    I’ve tried some CSS that I’ve found on this support forum as well as making an element with GP Premium. So far, it either has no effect or it affects the sidebar too.

    I don’t want to affect the container width of any other page, and I don’t want the sidebar size to change much from what it currently is. I want to be able to adjust that content area independently from the sidebar.

    Is there an option I’ve completely overlooked where I can adjust this?

    Thanks!

    #1333455
    Leo
    Staff
    Customer Support
    #1333467
    Katherine

    Hi Leo,

    This is one of the solutions that I tried earlier, but it made my sidebar unsightly. I’ve applied it to my site again so you can see it in all its ugly glory and tell me what I’m doing wrong.

    Thanks!

    #1333491
    Leo
    Staff
    Customer Support

    I thought you only wanted to change the container width on pages without the sidebar? Or I’m missing something here?

    #1333492
    Katherine

    Hi Leo,

    You got it the other way around. From my first comment:

    We are using a right sidebar on just our single post pages. In these pages, I would like to adjust the width of the content so that the text displays a max of 75-80 characters per line for readability.

    Basically, on our single post pages (which show a sidebar) we want to be able to adjust the width of the content area to have it be more readable. But every solution we have tried has affected the sidebar negatively. The link I submitted goes to one of the post pages so you can see.

    Thanks!

    #1333715
    David
    Staff
    Customer Support

    Hi there,

    if i read this correctly then try this CSS:

    @media (min-width: 768px) {
        .right-sidebar .site-content {
            display: flex;
        }
        .right-sidebar #right-sidebar {
            width: 240px;
        }
        .right-sidebar #primary {
            flex: 1;
        }
    }

    This fixes the right-sidebar to 240px. And allows the content to fill the remaining space.

    #1334513
    Katherine

    Not quite. That made the right sidebar much skinnier than I wanted it to be and although I’m able to change the width in your CSS to address that, it still doesn’t fix my main problem.

    110+ characters per line are being displayed when I want to adjust that so that the text displays a max of 75-80 characters per line for readability.

    If I keep adjusting the size of the sidebar in the CSS you sent to get to where I want to be in terms of characters per line, then the sidebar is much much too wide.

    So how do I limit the amount of characters per line while still having the page look good?

    #1334740
    Leo
    Staff
    Customer Support

    So how do I limit the amount of characters per line while still having the page look good?

    There no code/solution that let you adjust the number of characters per line, especially with all different screen width.

    Any chance you’ve seen an example of other sites doing what you’d like to achieve? That will certainly help us understand more.

    #1334957
    Katherine

    Sure thing!

    This is almost exactly what I’m trying to achieve:

    https://www.nomadicmatt.com/travel-blogs/best-hostels-in-san-francisco/

    #1335180
    David
    Staff
    Customer Support

    The site-content has to have a max-width to 650px to set a max-char count of 75.
    The current sidebar is capped at 300px.
    And there is 40 – 50px of spacing / padding to take into account.

    So the first change is set the Customizer > Layout > Container –> Width to 1000px.
    Then add this CSS:

    @media(min-width: 768px) {
        .right-sidebar .site-content {
            display: flex;
            flex-wrap: wrap;
        }
        .right-sidebar #primary {
            width: unset;
            flex: 0 0 650px;
            max-width: 650px;
        }
        .right-sidebar #right-sidebar {
            width: unset;
            flex: 1 1;
            min-width: 300px;
        }
    }

    For screens 1000px+ it will display the content + sidebar. Both at their max widths.
    Screens below that it will stack content and sidebar but the content will remain a max 650px.

    #1335649
    Katherine

    This is perfect! Thank you so much and for being so patient with me!

    #1336992
    David
    Staff
    Customer Support

    Glad we could be of help 🙂

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