- This topic has 13 replies, 3 voices, and was last updated 1 year, 8 months ago by
Tom.
-
AuthorPosts
-
June 26, 2019 at 8:30 pm #942462
Swadhin
Hi there,
Please help me adjust my site’s containers (post and sidebar) so that they look like this site. I am not talking about the big header image and all, just how the content box is a bit to the middle, and then has a sidebar also.
I have a rough screenshot of the site here to help me express better.
Thank you so much. π
June 26, 2019 at 8:54 pm #942472Leo
StaffCustomer SupportHi there,
Have you tried adjusting the sidebar width?
https://docs.generatepress.com/article/sidebar-widths/They are using a container width of 1280px and about 3:1 ratio for content and sidebar.
Let me know if this helps π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2019 at 9:10 pm #942478Swadhin
Hi Leo,
Thanks for the help. I set the container width to 1280 px but where do I setup the 3:1 ratio?
June 26, 2019 at 9:43 pm #942492Leo
StaffCustomer SupportHave you tried using the sidebar width option suggested above?
Using 25% for sidebar width would give you that ratio.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2019 at 10:07 pm #942505Swadhin
I did but that only let’s the content part fall flat within the rest 75% of the screen estate.
Please see the screenshot of my result and that original page’s result. It’s nowhere close.
June 27, 2019 at 8:25 am #943021Tom
Lead DeveloperLead DeveloperThey’re using a “fake” element to create that space.
You could set a max-width of the main content container instead:
@media (min-width: 769px) { #main { max-width: 700px; margin-left: auto; margin-right: auto; } }
Let me know if that helps π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 27, 2019 at 9:15 pm #943434Swadhin
Hi Tom,
Thanks for replying. I added the above code. By applying the code, we are basically in the same content with sidebar layout that comes default with the theme (see the screenshot here).
Here is another screenshot I created without your code and just center aligned the post area to give you an idea of the layout.
Here are some other sites that use the same layout in case you want to reference.
June 28, 2019 at 7:21 am #943930Tom
Lead DeveloperLead DeveloperI’m not sure I’m fully understanding. Isn’t that where the sidebar is placed by default?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 28, 2019 at 9:45 pm #944359Swadhin
Hi Tom,
Sorry for the confusion. Let me explain again:
See this page (this is the default GeneratePress template with right sidebar). Here we have equal space (or padding) on both sides (left of blog post and right of the sidebar).
Now, if you look at the design of Siegemedia or CopyBlogger blog (please see screenshot here), you’ll notice both have more space to the left side and very little space to the right side (right of the sidebar).
Why I am keen on this is, this is a trendy design most authority sites are picking up on. It:
- Makes the article a center aligned giving impression of the no sidebar layout.
- Still has a sidebar to get the benefits of it
It would be so kind of you to please help me achieve this with GeneratePress.
Thank you.
June 29, 2019 at 8:21 am #944678Tom
Lead DeveloperLead DeveloperI just checked out CopyBlogger and they’re using a very similar method that I provided above: https://generatepress.com/forums/topic/post-and-sidebar-container-adjustments/#post-943021
What if you adjusted it to something like this?:
@media (min-width: 769px) { #main { max-width: 700px; margin-left: auto; margin-right: 30px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 29, 2019 at 11:21 pm #945034Swadhin
Hi Tom,
This was exactly what I needed. Thanks so much. I hpe it will not effect the respnsiveness of the site and will look good on all devices. π
Thanks again,
-SwadhinJune 30, 2019 at 9:26 am #945384Tom
Lead DeveloperLead DeveloperThe media query should prevent it from doing anything on mobile.
Glad I could help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 1, 2019 at 10:57 pm #946680Swadhin
Hi Tom,
Sorry to be raising this issue again but the above code also adds effect to the blog page and archive pages (please check category archives from the link I have given in secret site link section) too. How to enable it only to singular posts and pages with sidebars only. Not anything else.This is also affecting pages with no sidebars which looks totally messed up and also affects pages built with page builders (because they also don’t have sidebars?).
OR
Can we put this as a post template (layouts where we choose:
Content / Sidebar
Sidebar / Content
Content (no sidebars)
Sidebar / Content / Sidebar
Sidebar / Sidebar / Content
Content / Sidebar / Sidebar) while writing our posts?Please help.
July 2, 2019 at 9:37 am #947179Tom
Lead DeveloperLead DeveloperLet’s try this:
@media (min-width: 769px) { .page.right-sidebar #main, .single.right-sidebar #main { max-width: 700px; margin-left: auto; margin-right: auto; } }
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.