How do I increase the width of content in a single page (twenty fourteen)?

I forgot to mention that I have already selected “full width page” for this page, but that doesn’t seem to have had any impact.

Try adding these rules to your custom CSS:

.woocommerce-page .site-content {
    margin-left: 0;
    margin-right: 0;
}

.woocommerce-page .twentyfourteen .tfwc {
    max-width: none;
}

That totally worked! Thank you so much!!!

Hi,

I am trying to duplicate this for my church’s website. The page that I want the content to display wider is the calendar page https://www.fellowshipcrc.net/calendar/

I can set the width in the html of the calendar embedded code, but cannot override the default width for content in the theme.

How do I do this for this page? I tried duplicating the custom CSS above and edited as this:

.calendar-page .site-content {
margin-left: 0;
margin-right: 0;
}

.calendar-page .twentyfourteen .tfwc {
max-width: none;
}

and placed it in the CSS Stylesheet Editor but nothing changed.

What am I doing wrong?

Thanks for the help!

@paladin54, there are no elements having a class called calendar-page on that page, so you can’t just make those kinds of substitutions in the CSS rules. If you want to adapt a particular rule or set of rules, you have to see what elements pertain to the specific page. In @rlthorburn’s case, the WooCommerce plugin added some custom classes to certain page elements, making it easier to specify a particular page.

Even without a plugin assigning custom classes, though, each page is assigned a unique identifier by WordPress called a page ID or post ID. You can see what the page ID/post ID is by doing a view source on the page, or, better yet, using a web debugging tool like Firebug or Chrome Developer Tools.

Also, on your calendar page, you have a sidebar, so you may not need all of the rules as in the previous example.

In your case, the calendar page has a page ID of 1163, and so there’s a class assigned to the body element called page-id-1163. Try adding this rule to your custom CSS:

.page-id-1163 .hentry {
   max-width: none;
}

Hmm,

That didn’t work for me.

I placed it in the spot under Appearance – Edit CSS in the Dashboard and that is the only code in that spot.

Is this the right place?

Thank you for your help so far.

Yes, sorry, I used the wrong selector. It should be:

.page-id-1163 .entry-content {
   max-width: none;
}

That worked perfectly. Thank you very much!