WordPress.com

1. thesmartcookiecook
   Member
   Aug 3, 2011, 7:10 PM

   I really want to make my site appear narrower. It takes up practically the whole page and makes my header look overstretched and too big:
   as seen here
   I have tried digging through the code and messing with the wrapper width but I can't seem to change it. I really want to fix this. I have the "clean home" theme. Anyone know what to do? You'd be my hero...

   The blog I need help with is thesmartcookiecook.com.

2. thesacredpath
   Member
   Aug 3, 2011, 7:34 PM

   This will take a number of things. You will have to redesign your header and reduce the width by however much you want. Then that image will have to be uploaded to your media library and then the URL of that has to be put directly into the CSS since the custom header uploader will always try to make the image the original size.

   There are a number of other elements that will have to be adjusted in width. Right now the overall width of the main wrapper is 990px, the sidebar is 250px wide and the content (post) area is 620px wide. What width are you wanting, or how much do you want to narrow it by?

3. thesmartcookiecook
   Member
   Aug 3, 2011, 7:39 PM

   First of all, thank you for trying to help me. Second of all, I'm not sure as far as actual numbers go, but I would say I'd like to reduce the width of the content by a quarter of what it is now. Finally, where do I put the code in the CCS once I change the image?

4. thesacredpath
   Member
   Aug 4, 2011, 1:21 AM

   The below takes the content area down to 475px wide, which is just a little more than 75% of what it was. After uploading the header image, get the URL of that image and put it into the #header-image background declaration below where it says URL OF IMAGE between the double quote marks. You will have to go back to appearance > header in your dashboard and "remove" the header image there. The header image should be 755px wide x 200px high.

   #wrapper, #header {
   width: 755px;
   }
   
   #header-image {
   background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
   width: 755px;
   height: 200px;
   }
   
   .content {
   width: 475px;
   }

5. thesmartcookiecook
   Member
   Aug 4, 2011, 1:48 AM

   Here's the link so you can see what happened:
   click

6. thesacredpath
   Member
   Aug 4, 2011, 2:17 AM

   You've pasted the entire stylesheet into the CSS edit window. At wordpress.COM, that will cause all sorts of problems. You want to put only the specific selectors, and only the specific declarations you are changing into the CSS edit window. Your changes are then loaded after the original CSS and override the declarations in the original.

   Take all the stuff out of the CSS edit window and put only what I have above into the CSS edit window and then save the stylesheet.

7. thesacredpath
   Member
   Aug 4, 2011, 2:18 AM

   I did miss one though, the footer. Add the following as well.

   #footer {
   width: 755px;
   }

Topic Closed

This topic has been closed to new replies.