How to broaden the blog site?

• 

  ngfashionblogger · Member · Jan 4, 2014 at 11:35 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I’m using the twenty fourteen theme.
  As you can see there’s a clear space on the right hand side on my blog.
  How can I reduce it so that I can have a larger width of my content?

  I have tried to copy this and change the width but that’s not working.
  #page {
  width: 960px;
  }

  Thanks in advance.

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

• 

  kaniamea · Member · Jan 5, 2014 at 2:49 pm

  • Copy link

  Hello,

  Have you tried:

  .site {
  	background-color: rgb(255,255,255);
  	max-width: 100%;
  	position: relative;
  }

• 

  ngfashionblogger · Member · Jan 5, 2014 at 4:50 pm

  • Copy link

  Hi Kaniamea,

  Thanks anyway.
  I tried it and it works to widen my site.
  However the header and the blog column(where my blog going to) are still in the same width.

  Mainly I want to widen my blog column as the original setting seems too narrow to me.
  It just makes the website too long to roll it down.
  Is there any code for me to adjust width, height of different parts in my blog (like header, sidebar, slider, etc.)?

• 

  kaniamea · Member · Jan 5, 2014 at 6:00 pm

  • Copy link

  Hi Edwin,
  I see what you mean. You could try:

  .site-content .entry-header,
  .site-content .entry-content,
  .site-content .entry-summary,
  .site-content .entry-meta,
  .page-content {
  	margin: 0 auto;
  	max-width: 800px;
  }

  This will increase the content area so your pages will be shorter and visitors will not have to scroll so much.

  In addition if you would like the width of your header to be full width you can also add:

  {
  	background-color: rgb(0,0,0);
  	max-width: 100%;
  	position: relative;
  	width: 100%;
  	z-index: 4;
  }

• 

  kaniamea · Member · Jan 5, 2014 at 6:01 pm

  • Copy link

  For the second code (to increase the header width), I made a small typo. Please use this instead:

  .site-header {
  	background-color: rgb(0,0,0);
  	max-width: 100%;
  	position: relative;
  	width: 100%;
  	z-index: 4;
  }

• 

  ngfashionblogger · Member · Jan 5, 2014 at 7:15 pm

  • Copy link

  Thank you so much Kaniamea!
  It looks much more better right now.

  One last question how can I center my blog?
  Cause I would like to keep the background image which is quite elegant rather than changing my blog to be full width.

• 

  kaniamea · Member · Jan 6, 2014 at 9:16 am

  • Copy link

  You are welcome, Edwin.

  To center your blog add margin: auto; to the code you already have in your custom css area:

  .site {
  	background-color: rgb(255,255,255);
  	max-width: 100%;
  	position: relative;
  }

  so it looks like this:

  .site {
  	background-color: rgb(255,255,255);
  	max-width: 100%;
  	position: relative;
  	margin: auto;
  }

• 

  ngfashionblogger · Member · Jan 6, 2014 at 11:12 am

  • Copy link

  It looks perfect now.

  You help me a lot.
  Thanks Kaniamea.

• 

  kaniamea · Member · Jan 6, 2014 at 11:14 am

  • Copy link

  Happy to help, Edwin! :)

• 

  studio315portraits · Member · Jan 6, 2014 at 11:51 am

  • Copy link

  Great Thank you i will try this. so where does this go?

• 

  kaniamea · Member · Jan 6, 2014 at 1:38 pm

  • Copy link

  You can go to Appearance => Custom Design => CSS