Content width on full-width pages, aka Content (no sidebars) via CSS

[Matt]

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!

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

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!!

[Tom]

Hey Matt,

You could do something like this:

.no-sidebar .site-content {
    max-width: 860px;
    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

[Matt]

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!

[Leo]

Can you link me to the page in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

Sure thing: [LINK] – Thanks!

[Leo]

Edited Tom’s CSS:
https://generatepress.com/forums/topic/content-width-on-full-width-pages-aka-content-no-sidebars-via-css/#post-1370165

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

It works perfectly! Thanks Leo!!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts