How to change width of content area without affecting sidebar width?

[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!

[Leo]

Hi there,

I believe this should help:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Katherine]

Sure thing!

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

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Katherine]

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

[David]

Glad we could be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts