Archived topic
Home Page Max Width Problem
7 replies · Started by Doğukan on June 2, 2022
My English level is bad, I hope I can explain.
I am using a page I created with Generateblocks and PostX plugins as the homepage.
.site-content .content-area {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}When I use the CSS code below, my content is as wide as I want, but I want the width of my homepage to be 950px. The code below makes the width of my home page 768px.
Can you help with this problem, thank you in advance.
Hi Dogukan,
Without custom CSS, the width of your site can be modifies in Appearance > Customize > Layout > Container: https://share.getcloudapp.com/p9uOjLZk
You may also set it through a Layout Element: https://docs.generatepress.com/article/layout-element-overview/#content-1
Using a Layout Element would allow you to set the Container Width specific to a page through the Display rules as well if you prefer setting it only for the homepage.
Now, with regards to your code, if you want to go by this, does modifying the code to something like this work?:
.site-content .content-area {
max-width: 950px;
margin-left: auto;
margin-right: auto;
}Hope this helps!
Thank you for your answer.
Appearance > Customize > Layout > Container: section set to 1200x.
I created a Layout Element and selected the Display Rules section as Front Page.
Elements has also started to appear on the Homepage.
.site-content .content-area {
max-width: 950px;
margin-left: auto;
margin-right: auto;
}These code stil working home page and article pages.
My problem continues.
Hi there,
You do NOT need CSS.
1. Remove this CSS.
2. Use layout element for your homepage.
3. Set the content container width at customizer> layout > container for rest of your site.
I Removed CSS.
I used layout for my homepage.
I set content container 768px, my home page still 768 px.
By the way, when i used container to 768px;
Bu when i used CSS codes, my header;
Because of that, i have to use CSS codes.
Then you can use layout element for homepage(set to 950px, location: frontpage) and also other pages(set to 768px, location set to entire site, exclude frontpage).
Can you link us to your site?
Worked, thank you so much :)
Glad to hear that :)
