Move body in sight theme

• 

  lisarhode · Member · Sep 17, 2013 at 4:57 pm

  • Copy link
  • Add topic to favorites

  I want to decrease the size of the body area so that it lines up with the image in my header. I am trying to get more space between the body and side widget column. Is there CSS that will work to do that with Sight theme?

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

• 

  timethief · Member · Sep 17, 2013 at 5:02 pm

  • Copy link

  What is the URL of the blog you are working on?

• 

  lisarhode · Member · Sep 17, 2013 at 6:32 pm

  • Copy link

  http://lisarhode.wordpress.com/

• 

  designsimply · Member · Sep 17, 2013 at 11:36 pm

  • Copy link

  I want to decrease the size of the body area so that it lines up with the image in my header.

  Do you mean you’re trying to make the entire width the same width as this header image which is 580px wide?
  http://lisarhode.files.wordpress.com/2013/09/copy-cropped-5484799364_631926a3a3_z-e1379286460497.jpg

  That doesn’t sound right, so I think I’m not understanding the question. If I got it wrong, can you explain it in another way for me? :)

• 

  lisarhode · Member · Sep 18, 2013 at 5:15 pm

  • Copy link

  Thanks for the response. It is not the entire width that I want 580px wide but the text area of the body. On the welcome page you will see a gray background defined by:

  .page {
  background: #DCE3E6;
  }

  This is the area that I want 580px wide

• 

  designsimply · Member · Sep 19, 2013 at 7:05 pm

  • Copy link

  I checked just now and I see that you’ve added this:

  .site-content {
  	width: 60%
  }

  Which gets you very close to 580px. The full width of the Sight theme for large screens is 975px, so if you wanted to get exactly 580px, you would do 580 / 975 = 0.5948 or 59.5%.

  I would recommend applying this only to large screens using a media query. Here is an example:

  First, find this in your custom CSS and remove the width and padding lines:

  #secondary {
  	background-color: #E3D1EB;
  	width:28.2051282%;
  	padding:.333em 2.5em 0 1em
  }

  Remove this as well:

  .site-content {
  	width: 60%;
  }

  And add this:

  @media only screen and (min-width: 768px) {
  	.site-content {
  		width: 59.5%;
  	}
  	#secondary {
  		padding-left: 1em;
  	}
  }

  To learn more about how media queries work, see http://www.htmldog.com/guides/css/advanced/mediaqueries/