increase page width of one page in word press site

• 

  ssmith872 · Member · Oct 1, 2015 at 3:25 pm

  • Copy link
  • Add topic to favorites

  I am embedding a Google Calendar on a page of my site. The calendar is the only content on this page. By default the page width is 474px and i want to increase this to 800px for just this single page. Can you give me some help on how to make this customization?
  thanks!
  Sue Smith

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Oct 1, 2015 at 4:47 pm

  • Copy link

  CSS editing is theme specific editing. Volunteers cannot view private blogs and we Volunteers do not request access to them. Staff can view private blog content and this thread is now tagged with modlook for their assistance. Please be patient while waiting for a response and subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

• 

  thesacredpath · Member · Oct 1, 2015 at 9:21 pm

  • Copy link

  Hi Sue, what we can do is to use the unique page id CSS class set in the opening body HTML tag on that page, and then construct CSS selectors to widen the content area and the calendar itself. Add the following to your custom CSS and see how it works for you.

  .page-id-53 .site-content .entry-header, .page-id-53 .site-content .entry-content, .page-id-53 .site-content .entry-content iframe {
      max-width: 800px !important;
      width: 100% !important;
  }

• 

  ssmith872 · Member · Oct 1, 2015 at 9:31 pm

  • Copy link

  That worked wonderfully. Can you tell me how i can determine my .page-id? In this case it was 53. But if i needed to do this again or customize something else on a specific page…

• 

  ssmith872 · Member · Oct 1, 2015 at 9:34 pm

  • Copy link

  Ah never mind. I just found it in view source, so i know i can do this again in the future. Thanks very much for your help!
  Sue Smith

• 

  thesacredpath · Member · Oct 1, 2015 at 9:59 pm

  • Copy link

  Sue, you are welcome, and nice sleuthing. :)

• 

  sketchpacker · Member · Oct 18, 2015 at 2:12 am

  • Copy link

  Hi, I have a similar issue. I would like to change the width of my home page to a full screen spread. Help me? I’m so stuck!

  ,

• 

  sketchpacker · Member · Oct 18, 2015 at 2:13 am

  • Copy link

  The blog I need help with is: sketchpacker.wordpress.com

• 

  ssmith872 · Member · Oct 18, 2015 at 2:06 pm

  • Copy link

  I’m pretty sure that i changed this topic to resolved. What the sacredpath recommended worked great for me, however i had a specific page with just one purpose: a google calendar. However if this is your homepage i think that you might want to pick a different theme that allows you to have a wider page Or look to see if there are different width options (page templates) in your theme.

• 

  g471n · Member · Oct 18, 2015 at 4:20 pm

  • Copy link

  Hi sketchpacker

  I had a look at your site. Try adding the following line of custom CSS.

  .site-content {
      max-width: 100%;
  }

  To add custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save.