Archived topic
Container Problem With Sidebar
13 replies · Started by Shubham on January 27, 2020
Hey.
I want to ask that how can I get this size of container and sidebar
on my website.
https://www.masterincoding.com/what-is-string-in-java/
I am trying to adjust container but it is not matching with the width of this website.
Also, I am using content-aware sidebar plugin
Hi there,
that site uses fixed widths for the sidebars and content which leads to sidewards scrolling on smaller screens.
What exactly you trying to achieve ? Is it a fixed sized sidebar for the Adverts ? Lets us know.
Hi David,
I am talking about the Desktop version and I want to achieve the main container width and position.
I am trying to increase container size from customization but it's not going more than 1200
Can you disable your cache so i can take a look at whats causing that.
Yes, I did that.
Please have a look now.
So you have a Layout Element enabled:
https://docs.generatepress.com/article/layout-element-overview/
Oh ok.
You're awesome David.
Yes, now it's working fine.
But what if I want to left-align my sidebar and main container?
I want to remove space from the left side of the left sidebar.
So the left sidebar sits on lefthand edge of the browser viewport ?
Yes, I want left sidebar on the left hand of the browser along with the main container.
If you delete the Layout Element, then in Customizer > Layout > Container set the Container Width to 1300px it will match the other sites dimensions.
Then the only other thing is to enable the righthand sidebar to match.
I already deleted that and now it is matching other sites dimension.
What I am asking that I want to lift align all my container to left-hand as of now it is aligned to the center.
Like I want less space on the left side of the left-sidebar and more space on the right side of the right sidebar.
Please refer to the image.
Now: https://ibb.co/GRyqDBm
What I want: https://ibb.co/B2L8HkB
So this code will align the entire single post including the nav to the left:
@media (min-width: 769px) {
.single-post .grid-container {
margin-left: 40px !important;
}
}
If you want to just shift the content and sidebar then use this CSS instead:
@media (min-width: 769px) {
.single-post #page.grid-container {
margin-left: 40px !important;
}
}
That is working.
Thanks a lot, man.
Really appreciated.
You're welcome