Widen Theme and Content Areas

Hi @mslake,

You can achieve what you’re after by adding some custom CSS to your child theme’s style.css file.

The following will widen the width of the right sidebar to 300px:

@media screen and (min-width: 1180px) {
.sidebar-widget-area {
    width: 300px;
}
}

And the following sets the width of the main content area to 800px:

@media screen and (min-width: 1180px) {
.content-area {
    width: 800px;
}
}

Finally, you can then expand the width of the entire site with this snippet:

@media screen and (min-width: 1180px) {
.site {
    margin: 0 auto;
    max-width: 1300px;
    padding: 0;
}
}

You can increase/decrease the value of max-width and width in the above snippets in order to experiment with different widths.

Hope that’s helpful! Please don’t hesitate to reply right back if you have further questions on that.

Hi there,

I need more space between the sidebar and the main content area on the homepage and all post pages

You can increase the gap between your content and your main sidebar by decreasing the width of the content area, using the previous CSS I provided:

@media screen and (min-width: 1180px)
.content-area {
    width: 786px;
}

and I need to shift the main content area over to the left by about 200-250 pixels. Then

To decrease the padding to the left of the content, use the following:

@media screen and (min-width: 1180px) {
.entry-body {
    padding-left: 10px;
}
}

The value of padding-left can be adjusted to your liking.

Also, I’d like to shift the sidebar over to the right by about 100 pixels, thanks.

You can achieve this using the first set of CSS I provide: Increase the width of .site and then increase the width of .sidebar-widget-area and .content-area accordingly.

Let me know how you get on with that.

You’re welcome! I’m glad to hear that worked out for you.