- This topic has 11 replies, 3 voices, and was last updated 7 months ago by
David.
-
AuthorPosts
-
June 18, 2020 at 3:59 pm #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!
June 18, 2020 at 7:31 pm #1333455Leo
StaffCustomer SupportHi there,
I believe this should help:
https://docs.generatepress.com/article/layout-element-overview/#content-1Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 18, 2020 at 7:47 pm #1333467Katherine
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!
June 18, 2020 at 8:44 pm #1333491Leo
StaffCustomer SupportI 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/June 18, 2020 at 8:49 pm #1333492Katherine
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!
June 19, 2020 at 1:56 am #1333715David
StaffCustomer SupportHi 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/June 19, 2020 at 12:06 pm #1334513Katherine
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?
June 19, 2020 at 2:47 pm #1334740Leo
StaffCustomer SupportSo 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/June 19, 2020 at 10:22 pm #1334957Katherine
Sure thing!
This is almost exactly what I’m trying to achieve:
https://www.nomadicmatt.com/travel-blogs/best-hostels-in-san-francisco/
June 20, 2020 at 4:42 am #1335180David
StaffCustomer SupportThe 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/June 20, 2020 at 12:04 pm #1335649Katherine
This is perfect! Thank you so much and for being so patient with me!
June 22, 2020 at 1:09 am #1336992David
StaffCustomer SupportGlad we could be of help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.