Removing side page margins

  • Author
    Posts
  • #1094682

    tiagodovale
    Member

    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.

    #1094940

    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.

    #1094944

    tiagodovale
    Member

    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…

    #1094962

    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.

    #1094963

    tiagodovale
    Member

    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…

    #1094964

    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;
    }
    #1094965

    tiagodovale
    Member

    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)

    #1094966

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

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

    tiagodovale
    Member

    That did it!! :)
    Thanks!!

    #1094968

    Cool. :)

The topic ‘Removing side page margins’ is closed to new replies.