Archived topic
Content width on full-width pages, aka Content (no sidebars) via CSS
9 replies · Started by Matt on July 19, 2020
Hi GP Team! I'm looking to set a default width on pages that I set as "Content (no sidebars") (aka full width).
At first, I thought I had it working via:
@media (min-width: 1200px) {.page-template-default .site.grid-container {max-width: 860px;}}
And it did work: https://gyazo.com/8323a374cc5e01bf7c9372cebb5df40a (or at least I thought).
However, I edited a different page (set to Default) fixing a typo, hit "update", and then the page got screwed up: https://gyazo.com/169848bab73b1c8ba72c4da7eb008488
I'm pretty sure the .page-template-default is the incorrect selector lol ;)
Is there a specific selector I can use for pages that are full width, aka Content (no sidebars) instead? Or is there a different snipper of CSS I should be using?
Thanks so much!
Hi there,
I think creating a single layout element to select the sidebar layout and content layout would be the easiest:
https://docs.generatepress.com/article/layout-element-overview/#sidebar
https://docs.generatepress.com/article/layout-element-overview/#content-1
Let me know if this helps :)
Hey Leo! I took a look and tried a few things. I think I'm misunderstanding (or I miscommunicated).
I explained the scenario here: https://www.loom.com/share/bf3c27ecb6dc49d3b816f6419a7caeb5
Please let me know your thoughts. Thanks!!
Hey Matt,
You could do something like this:
.no-sidebar .site-content {
max-width: 860px;
margin-left: auto;
margin-right: auto;
}Let me know :)
Hey Tom! Thanks! While it does reduce the content width, is there a way to also make the "body" centered on the page so it's not left-aligned like this?:
https://gyazo.com/3027ae3aec17a0950db4a8e09abc227d
Thanks!
Can you link me to the page in question?
Sure thing: [LINK] - Thanks!
It works perfectly! Thanks Leo!!
No problem :)
