WordPress.com

1. tiagodovale
   Member
   Dec 12, 2012, 2:05 AM

   Hi guys!

   I've been fighting with my page's margins.

   I was able to remove the top and bottom ones with
   

   #page {
   	margin-top: 0;
   	margin-bottom: 0;
   }

   but no matter what I try I can't remove the left and right ones...

   Any ideas?
   Thank you guys

   The blog I need help with is tiagodovale.com.

2. castelinokelvin
   Member
   Dec 17, 2012, 8:44 AM

   I guess you have added the margin as '0 auto' correct?
   I guess you can give it as
   

   #page {
   margin: 0 !important;
   }

   instead if you want to remove the margin on all sides.

3. tiagodovale
   Member
   Dec 17, 2012, 5:39 PM

   Thanks for replying :)

   I'm afraid it doesn't do the trick... Top and Bottom respond, but the sides remain with a margin..

   I don't know if it's a theme specific limitation or if there's something we're missing...

4. designsimply
   Staff
   Dec 31, 2012, 4:37 PM

   To do that in the Twenty Eleven theme, you'll want to zero out the left and right margin for the "content" and "secondary" IDs. If you do that, you'll probably also want to adjust the width of the content area too. Start with this CSS to adjust pages that have a sidebar:

   #content {
   	margin-left: 0;
   	width: 75%;
   }
   
   #secondary {
   	margin-right: 0;
   }

   And use this for single posts without a sidebar:

   .singular #content {
   	margin: 0;
   }
   
   .singular .entry-header,
   .singular .entry-content,
   .singular footer.entry-meta,
   .singular #comments-title {
   	width: 100%;
   }

   Adjust the width as needed.

5. tiagodovale
   Member
   Dec 31, 2012, 5:27 PM

   Hi! :) Thanks again!!

   With your code the contents width adjusts to the header's width, but there's always a margin between the header's sides and the limit of the page...

6. designsimply
   Staff
   Jan 2, 2013, 4:03 PM

   When you say "the limit of the page" are you referring to the entire browser width? If so, keep in mind that different people will have different monitor sizes and the margins will look different depending on each setup. You could get rid of the size restriction of the "#page" element, but personally I think there's a better chance it will look good if you stick with the current layout. If you want to make "#page" full-width anyway, here's how to do it:

   #page {
        max-width: none;
   }

7. tiagodovale
   Member
   Jan 2, 2013, 4:26 PM

   Hi: thanks for your help!

   That code removes the header's max width of 1000 pixels, but there's always a margins between the headers's sides and the browser window frame (let's call it that).

   What I was trying to do was having the header and footer occupy the full width of the page, with no margins (as I was able to do at the top, for instance, where the header is now touching the edge of the page without a margin)

8. designsimply
   Staff
   Jan 2, 2013, 6:17 PM

   There's also some padding on the body tag in that theme. Maybe remove that as well?

   #page {
        max-width: none;
   }
   
   body {
   	padding: 0;
   }

9. tiagodovale
   Member
   Jan 2, 2013, 6:30 PM

   That did it!! :)
   Thanks!!

10. designsimply
    Staff
    Jan 2, 2013, 6:34 PM

    Cool. :)

Topic Closed

This topic has been closed to new replies.