Archived topic
How to create different site widths for pages and blog posts?
11 replies · Started by Cecilia on January 20, 2018
Hi!
First of all, thanks for a great theme and plugin!
I'm trying to figure out how to create the design I want.
I have looked through the documentation and forum but I have not found the answer.
What I want to do is this:
1.
I want the default page width to be 1100px.
Cuztomize > Layout > Container > Container width - check.
https://docs.generatepress.com/article/container-width/
When opening a blog post I would like the content to be 700px to increase readability.
If I add 200px padding left and right for content, it affects the whole site, making my 1100px-site narrow down to 700px.
https://docs.generatepress.com/article/content-padding/
2.
Also, I wonder if it's possible to affect the blog archive page to show for example a signup form at the very top of the page. I tried the sections plugin but I didn't manage to make it work. Perhaps it's not possible due to standard functionality in WordPress?
/Cecilia
PS My site is under construction, so you will not be able to see it. Let me know if you need to, and I'll let you in.
Hi there,
1. Are you using separate container or one container?
2. You can use GP hooks with conditional tags:
https://docs.generatepress.com/article/hooks-overview/
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/using-hooks-conditional-tags/#blog-posts-page
Thanks!
I don't really "use" container/one container in that sense since I'm still playing around trying to figure things out, so I'm flexible. I've tried both. Is one to prefer over the other, considering what I want to do?
Thanks for the links, I'll check it out.
/Cecilia
I've looked into hooks but I don't quite see how to do what I want.
I would like single blog posts to have a container width of 700px.
Other pages to be 850px.
Content width is set to 850px.
Content layout is set to separate containers.
What can I add with hooks making the content width for posts to be max 700px?
/Cecilia
This CSS should work to make the single posts 700px in width:
body.single .grid-container {
max-width: 700px;
}Hooks is for your second question to add the signup form as you labeled.
Ah, ok. I see. Sorry for the mixup.
Thank you!
No problem!
Hey, I just tried this but, for some reason, it also changes the width of the menu to 700px which is something I don't want.
Do you know how I can fix this?
Try this instead:
body.single .site.grid-container {
max-width: 700px;
}It worked, thanks!
Just one more question on this topic: How can I only apply the 700px width to posts that don't have a sidebar?
Hi there,
update the CSS to this:
body.single.no-sidebar .site.grid-container {
max-width: 700px;
}