Hi, thepracticalsaver…
I haven’t really figured out why my home page layout is similar to my blog page layout but it’s for a different thread and question. lol.
Because they are each just a list of your posts with latest first and no sidebar.
I was told that if I change the width size then, I would have to touch the header size, and so many things.
Yes, but the width of these sections of the theme are all wrapped and the width controlled by a “container”.
First and foremost…
You really should be creating a Child Theme for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost. Or you could use a Custom CSS plugin.
Once either one of the above are done, read this…
The “container” is what wraps both the content and the sidebar on every page but your home page and blog – which have no sidebar.
Presently, the container has a width set at 980px (pixels). That is as wide as it can get, so if the screen is wider than 980px, then a white “margin” will appear on both sides, keeping the container centered in the middle of the screen.
The “site-content”, where your posts are has a margin on the right of 340px and no set width – which tells the browser to fill the entire space of the container with your posts except for the 340px on its right.
300px of this 340px of margin is filled by the 300px width of the sidebar by “pulling” it into the content-area with a ‘negative’ left-margin on the sidebar of 300px – thus leaving a 40px space between the site-content and the sidebar.
/* LAYOUT
----------------------------------------------- */
.container {
width: 980px;
}
.content-area {
width: 100%;
float: left;
}
.site-content {
margin: 0 340px 0 0;
}
.site-sidebar {
width: 300px;
float: left;
margin: 0 0 0 -300px;
}
The above code is the settings for any screen width above 960px width, but don’t let this confuse you.
On any screen width less than 960px, this code takes over…
/* RESPONSIVE SUPPORT
----------------------------------------------- */
@media screen and (max-width: 960px) {
.container {
width: 90%;
}
.site-content {
margin-right: 40%;
}
.site-sidebar {
width: 35%;
margin-left: -35%;
}
It sets all the widths by percentages instead of set widths in pixels.
So, the easiest solution is to create the child theme or use a custom css plugin and then merely enter the below code in and your site will be 90% of any screen with a 5 percent white space on either side.
.container {
width: 90%;
max-width: 90%;
}
.site-content {
margin-right: 40%;
}
.site-sidebar {
width: 35%;
margin-left: -35%;
}
Though, with this, your home page and blog page will be 90% width of any screen. If the container is too wide, change its “max-width” by pixels (px) – (i.e – 1500px).
The reason for the child theme or custom css plugin is that you can play with the widths of these and not disturb your main theme. If you do not like what is happening – or when you finish you don’t like the result – you either deactivate the plugin or deactivate the child theme, and your site goes back to what it is now.
