How to change content width

Hey there,

You didn’t provide a link so I took a look at the demo site, the width for the area is 940px.

I’m guessing you’re talking about the space from the content to the edge of the container?

If so then it’s this CSS which does it:

.single.no-sidebar .entry-header,
  .single.no-sidebar .entry-content,
  .single.no-sidebar .entry-summary,
  .single.no-sidebar #image-navigation,
  .single.no-sidebar .entry-meta,
  .single.no-sidebar .comments-title,
  .single.no-sidebar .comment-navigation,
  .single.no-sidebar ol.commentlist,
  .single.no-sidebar #respond,
  body.page.no-sidebar .entry-header,
  body.page.no-sidebar .entry-content,
  body.page.no-sidebar .entry-summary,
  body.page.no-sidebar #image-navigation,
  body.page.no-sidebar .entry-meta,
  body.page.no-sidebar .comments-title,
  body.page.no-sidebar .comment-navigation,
  body.page.no-sidebar ol.commentlist,
  body.page.no-sidebar #respond,
  .one-col-excerpts.no-sidebar .entry-header,
  .one-col-excerpts.no-sidebar .entry-content,
  .one-col-excerpts.no-sidebar .entry-summary,
  .one-col-excerpts.no-sidebar #image-navigation,
  .one-col-excerpts.no-sidebar .entry-meta,
  .one-col-excerpts.no-sidebar .comments-title,
  .one-col-excerpts.no-sidebar .comment-navigation,
  .one-col-excerpts.no-sidebar ol.commentlist,
  .one-col-excerpts.no-sidebar #respond,
  .one-col-full-posts.no-sidebar .entry-header,
  .one-col-full-posts.no-sidebar .entry-content,
  .one-col-full-posts.no-sidebar .entry-summary,
  .one-col-full-posts.no-sidebar #image-navigation,
  .one-col-full-posts.no-sidebar .entry-meta,
  .one-col-full-posts.no-sidebar .comments-title,
  .one-col-full-posts.no-sidebar .comment-navigation,
  .one-col-full-posts.no-sidebar ol.commentlist,
  .one-col-full-posts.no-sidebar #respond,
  .no-js.no-sidebar .entry-header,
  .no-js.no-sidebar .entry-content,
  .no-js.no-sidebar .entry-summary,
  .no-js.no-sidebar #image-navigation,
  .no-js.no-sidebar .entry-meta,
  .no-js.no-sidebar .comments-title,
  .no-js.no-sidebar .comment-navigation,
  .no-js.no-sidebar ol.commentlist,
  .no-js.no-sidebar #respond {
    max-width: 940px;
    max-width: 66rem;
    margin-right: auto;
    margin-left: auto;
  }

You could edit the max-width there and then put that in a child theme or a css plugin.

There is a chance that the theme has a CSS field in the options, if not then you can make a child theme:

http://codex.ww.wp.xz.cn/Child_Themes
http://premium.wpmudev.org/blog/create-wordpress-child-theme/

Or you can instead use a plugin if you like:

http://ww.wp.xz.cn/plugins/custom-css-manager-plugin/screenshots/

http://ww.wp.xz.cn/plugins/my-custom-css/screenshots/

http://ww.wp.xz.cn/plugins/pc-custom-css/

http://ww.wp.xz.cn/plugins/imporved-simpler-css/screenshots/

Have a fantastic day! 🙂

And that’s why I provided you with some links so you can research and understand better how to make a child theme or how to include CSS through a plugin if you don’t wish to create a child theme 😉

The CSS above I mentioned can be used here. To break this down for you the max-width is the maximum width that the area can take up. You could either change the px/rem to a higher value or you could go with 100% so it takes up 100% of the space available within it’s container.

example:

.single.no-sidebar .entry-header,
  .single.no-sidebar .entry-content,
  .single.no-sidebar .entry-summary,
  .single.no-sidebar #image-navigation,
  .single.no-sidebar .entry-meta,
  .single.no-sidebar .comments-title,
  .single.no-sidebar .comment-navigation,
  .single.no-sidebar ol.commentlist,
  .single.no-sidebar #respond,
  body.page.no-sidebar .entry-header,
  body.page.no-sidebar .entry-content,
  body.page.no-sidebar .entry-summary,
  body.page.no-sidebar #image-navigation,
  body.page.no-sidebar .entry-meta,
  body.page.no-sidebar .comments-title,
  body.page.no-sidebar .comment-navigation,
  body.page.no-sidebar ol.commentlist,
  body.page.no-sidebar #respond,
  .one-col-excerpts.no-sidebar .entry-header,
  .one-col-excerpts.no-sidebar .entry-content,
  .one-col-excerpts.no-sidebar .entry-summary,
  .one-col-excerpts.no-sidebar #image-navigation,
  .one-col-excerpts.no-sidebar .entry-meta,
  .one-col-excerpts.no-sidebar .comments-title,
  .one-col-excerpts.no-sidebar .comment-navigation,
  .one-col-excerpts.no-sidebar ol.commentlist,
  .one-col-excerpts.no-sidebar #respond,
  .one-col-full-posts.no-sidebar .entry-header,
  .one-col-full-posts.no-sidebar .entry-content,
  .one-col-full-posts.no-sidebar .entry-summary,
  .one-col-full-posts.no-sidebar #image-navigation,
  .one-col-full-posts.no-sidebar .entry-meta,
  .one-col-full-posts.no-sidebar .comments-title,
  .one-col-full-posts.no-sidebar .comment-navigation,
  .one-col-full-posts.no-sidebar ol.commentlist,
  .one-col-full-posts.no-sidebar #respond,
  .no-js.no-sidebar .entry-header,
  .no-js.no-sidebar .entry-content,
  .no-js.no-sidebar .entry-summary,
  .no-js.no-sidebar #image-navigation,
  .no-js.no-sidebar .entry-meta,
  .no-js.no-sidebar .comments-title,
  .no-js.no-sidebar .comment-navigation,
  .no-js.no-sidebar ol.commentlist,
  .no-js.no-sidebar #respond {
    max-width: 100%;
  }

For learning CSS you might like to try these:

http://www.w3schools.com/css/css_intro.asp
http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/ <– you might like to take a look around Chris’s site, lots of cool stuff. 🙂

Have a great weekend!

No worries, glad you got it sorted 🙂

The CSS above (that I quoted) was from the original used by your theme to define those areas width. If for some reason changing that wasn’t working then I’d guess the change was not used late enough in the load sequence.

With CSS the last instance called is the one that takes priority.

If you’d like to know more about the no-js class you’re targeting then you can read here:

http://alxmedia.se/code/2013/11/using-a-no-js-class-in-your-wordpress-theme/

Take care.