Archived topic
Please help me move right sidebar to the right
6 replies · Started by caabh on June 2, 2021
Hello, I am already loving GP and this is the best theme I have ever found. I see a lot of possibilities out there and I am learning a lot from the forum as well. But after searching a lot I can't find solution to this problem. I know it should be very simple, but I am not getting it. I want to shift Sticky Sidebar to the most right of the page. I want to remove the white space (margin) at the right side.
Please view the pic: https://ibb.co/SVJ93n7
This is the CSS that I am using:
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 70%;
height: 100%;
width:20%;
;
/* offset from top of screen on scroll */
}Hi Chetan,
The white space you see is the auto-margin when the page content is contained to a certain max-width.
In your site's case, there's 2 max-widths being set. one for #content which is this one:
#content {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}And one from the grid container.
.grid-container {
max-width: 1050px;
}Imagine this scenario:
Say, for example, our screen is sized 1920px wide. If the content is contained to max-width of 900px, the size of the white space you see on the left and the right side of the page is (1920px - 900px) / 2 which is 510px.
Now, to answer the question, the issue why the right-sidebar can't go further to the left is because, of this max-width + auto margin.
This CSS forces the content (including sidebar) to be placed on the center of the viewport as much as possible. This effectively pushes the sidebar to the left, preventing it from going to the right edge of the screen.
While we can override the margin-right: auto;, with -
div#page {
margin-right: 0;
} the result will not be ideal. It's going to be visually uneven. It'll look like this - https://share.getcloudapp.com/BluKJ9jy
Since this isn't something usually preferred, our options would be to either:
Make remove the max-width so there's no auto-margin spacing.
OR
use position: fixed; instead of position: sticky;.
Removing the max-width can be done by setting the page to full-width (no padding) using a Layout Element - https://docs.generatepress.com/article/layout-element-overview/#content-1
Doing position fixed will be very tricky to pull off but you can try experimenting with that if you find it fitting.
Thanks for taking time and making me understand the concept. I really appreciate it. Actually what I want to achieve is the rigth sidebar - sticky + minimum margin on the right.
The content centred AND there should be no space in the right side of the sidebar.
So, please let me know how can I do this.
Thanks
That site you've linked actually has the same concept/idea. Except it has a larger max-width of 1280px so the white space on the side isn't as obvious, but here is one. See here:
https://share.getcloudapp.com/JruDv26K - the same CSS concept.
https://share.getcloudapp.com/P8u9gBmO - see the orange indicator. that's the margin auto spacing.
Which you can actually replicate fully by going to Appearance > Customize > Layout > Container and set the width to 1280px.
Also, make sure you don't have any custom CSS or Layout Element that's setting the 900px I see on your page.
I've done everything suggested by you. It's still not working. Would you please check? I removed the Left Sidebar also, now the website is looking weird. Is it necessary if I want to keep my content in the center of the page then I will have to keep "left sidebar" there? Thanks
Hi, after a lot of experiments, I've finally achieved this!
This thread can be closed.
Thanks a lot for your support!
Nice one. Thank you for letting us know. Glad you got it sorted.
