Need help? Check out our Support site, then


Removing side page margins

  1. 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. 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. 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. 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. 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. 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. 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. 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. That did it!! :)
    Thanks!!

  10. Cool. :)

Topic Closed

This topic has been closed to new replies.

About this Topic