- This topic has 20 replies, 4 voices, and was last updated 3 years, 5 months ago by Elvin.
-
AuthorPosts
-
October 31, 2020 at 10:19 am #1512619kyle
Hello guys and girls,
When I allow my right sidebar on to post pages, it affects the width of my content. How can stop this from happening, I’d like to keep the original post width whilst still having right or left side bars?
October 31, 2020 at 10:34 am #1512641LeoStaffCustomer SupportHi there,
The content width set in the customizer includes sidebars.
You can increase the content container width when a sidebar is present using a layout element:
https://docs.generatepress.com/article/layout-element-overview/#content-1October 31, 2020 at 10:37 am #1512646kyleI dont understand Leo?
October 31, 2020 at 11:30 am #1512716LeoStaffCustomer SupportSorry which part?
Have you tried creating an layout element with a wider content width then set the display rules to all posts?
November 8, 2020 at 12:38 am #1522227kyleHi Leo, I currently have an element set to 950px affecting all posts but no dice.
The thing is there is so much space on the right of the side bar that i’d prefer the widgets to take up, this way the area for my content will have more space. How can i do this?
November 8, 2020 at 7:14 am #1522636DavidStaffCustomer SupportHi there,
Do you want the post content to be 950px centered + the sidebar sitting in the space to the right ?
If so what happens when the screen reduces in size – Should the post content reduce in size to accommodate the sidebar? Or should the sidebar move to below the post content?
November 8, 2020 at 7:23 am #1522649kyleThe side bar can move to the bottom in order to be mobile friendly 🙂
November 8, 2020 at 10:33 am #1522861DavidStaffCustomer SupportYou could add some CSS like this:
@media(min-width: 1480px) { .right-sidebar.single-post .is-right-sidebar { position: absolute; max-width: 300px; left: calc( ((100vw - 950px) / 2) + 950px); top: 30px; } .right-sidebar.single-post #primary { width: 100%; } } @media(max-width: 1479px) { .right-sidebar .site-content { flex-direction: column; } .right-sidebar .site-content .content-area, .right-sidebar .is-right-sidebar { width: 100%; } .right-sidebar #main { margin-right: 0; } }
My only concern here is that the sidebar will only show up to the right on screen sizes over 1480px. You could reduce the container width to make it work on smaller screens.
Then reduce the value in this line of the CSS:left: calc( ((100vw - 950px) / 2) + 950px);
Then reduce the 2 x @media width values for any reduction you make.
November 8, 2020 at 10:38 am #1522866kyleHey David, that CSS does not change anything, I’m not sure why?
November 8, 2020 at 2:55 pm #1523045DavidStaffCustomer SupportHow/Where did you add the CSS?
November 9, 2020 at 5:36 am #1523709kyleI added it in the additional CSS in customizer
November 9, 2020 at 5:45 am #1523719DavidStaffCustomer SupportDid you remove it ? as i cannot see it in there. Try adding it to the very top of the CSS.
November 9, 2020 at 6:07 am #1523747kyleYes i removed it, alright let me try that then
November 9, 2020 at 6:10 am #1523754kyleOk so what that does is it moves the sidebar widgets all the way to the bottom. i’d like them to only do that in mobile.
I just want the side bar widgets to take up some more space on the right so that there is more space for the post contetn to be wider
November 9, 2020 at 6:56 am #1523982DavidStaffCustomer SupportAs i said above, this only works if it is viewed on a large screen ie 1480px or greater.
Do you want to keep the Post content width at 950px ? -
AuthorPosts
- You must be logged in to reply to this topic.