Archived topic

Seperate Container widths for main page and single post and page

7 replies · Started by Jared on January 18, 2019

Viewing posts 1–8 of 8

January 18, 2019 at 12:35 am #785266

Hi, i am using GP premium for my site and I assigned a page to be the front page with a WPshowposts list.

is there a way to have different container width for the mainpage versus the single post and pages.

I would like the main page to have a wider width of 1200px as I have 3 columns for the wpshowpost, and a smaller 800px for the single post/page.

thanks!

January 18, 2019 at 4:10 am #785375

Hi there,

try this CSS:

.single-post #main {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

January 18, 2019 at 8:42 am #785687

it worked! thanks!

btw what is the class to use for single page?

is it single-page like below?

.single-page #main {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

January 18, 2019 at 9:29 am #785732

Try:

.page #main {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

January 18, 2019 at 4:27 pm #785950

thanks. As I am using a page for the frontpage of the site.. it's width is also affected by this .page css code.

I wanted to maintain 1200px for the mainpage and 800px for all other posts and pages. is there any other way around it?

January 18, 2019 at 4:32 pm #785951

Then it might be easier to set 800px in the customizer as more pages will use that settings:
https://docs.generatepress.com/article/container-width/

Then we can use this this CSS to change home page only:

body.home .site.grid-container {
    max-width: 1200px;
}

January 18, 2019 at 10:17 pm #786051

Learning lots of css tips from you guys here! thank you very much!

January 19, 2019 at 10:22 am #786447

No problem :)

This archived topic is closed to new replies.