I’m still relatively new to WordPress, but one of the things that really got me worked up was the width issue on the front page of my website. I mean, just look at this:
So I did some Google searches and actually didn’t have much luck. There were no settings in WordPress that I could change, and the CSS settings that I found just didn’t work.
This meant I had to fire up the DOM inspector in Chrome and play around with CSS settings. So that’s exactly what I did, and I found a solution that I wanted to share here. Simply paste this CSS into the “Additional CSS” setting in your theme configuration:
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments {
width: 90%;
}
…and that should fix the issue, making your front page look like this:
Is that not a thing of beauty? 🙂
Let me know if you have any thoughts or concerns in the comments.
— Doug