Changing width of a page in Twenty Fourteen

chasebenefice · Member · Aug 24, 2015 at 8:10 pm
Copy link

Add topic to favorites
I’m trying to widen the width of the content on the Twenty Fourteen theme on this page:

http://thechasebenefice.org.uk/whats-on-across-the-benefice/

Could anyone help me with the CSS necessary to make that change?

Total novice here!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Aug 24, 2015 at 8:18 pm
Copy link
As the width of any page cannot exceed the width of the theme and as your theme allows for full width pages, I’m just making sure that you have read this:

Page Templates
Tailor content pages to your needs with two special page templates: a full-width page to remove the right sidebar … https://wordpress.com/themes/twentyfourteen/

See also https://en.support.wordpress.com/pages/page-attributes/#template

If the Page attributes box is not visible then click the screen options link in the top right hand corner of the page a include the Pages module. The Screen Options pull down tab is located in the upper right corner of your Dashboard. https://en.support.wordpress.com/screen-options/

Page – Likes and Shares, Page Attributes, Featured Image, Discussion, Comments, Page Revisions, Slug, Author, Revisions, Writing Helper
chasebenefice · Member · Aug 24, 2015 at 8:40 pm
Copy link
AUTO-REPLY
Thank you for your email. I am away from my desk until 1 September. I will reply as soon as I am able. Mark
jeremeylduvall · Member · Aug 24, 2015 at 8:50 pm
Copy link
I think this will do the trick!
```
#post-53 .entry-content {
	max-width: 800px;
	margin: 0 auto;
}
```
A few notes:

– This is specific to the Twenty Fourteen theme

– This is specific to the page you mentioned

– I double-checked and this shouldn’t affect the mobile layout

Can you give that a try? Just copy and paste the code under Appearance -> Customize -> CSS.
chasebenefice · Member · Aug 24, 2015 at 9:00 pm
Copy link
AUTO-REPLY
Thank you for your email. I am away from my desk until 1 September. I will reply as soon as I am able. Mark
chasebenefice · Member · Aug 24, 2015 at 9:06 pm
Copy link
Thanks for the comments timethief and jeremeyduvall. It tried the code and it worked! Brilliant!

Is it possible to create a new page template using these same margins? Or how can I replicate them on a new page?

Thanks again.

PS sorry about the auto reply: I’m supposed to be on holiday!
thesacredpath · Member · Aug 25, 2015 at 7:45 pm
Copy link
Hi, you can add another selector for the additional page to the rule @jeremeylduvall gave above, comma separated from the first such as this
#post-53 .entry-content, #post-49 .entry-content
to find the unique post id, you inspect the element with the web inspector in your browser and look for the “article” HTML tag. You will then see something like this in that tag
<article id="post-49" class...
use the CSS id to target that content.
thesacredpath · Member · Aug 25, 2015 at 7:45 pm
Copy link
If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

No items found.