WordPress.com Forums » Topic: Removing side page margins

designsimply on "Removing side page margins"

designsimply — Wed, 02 Jan 2013 18:34:38 +0000

Cool. :)

tiagodovale on "Removing side page margins"

tiagodovale — Wed, 02 Jan 2013 18:30:38 +0000

That did it!! :)
Thanks!!

designsimply on "Removing side page margins"

designsimply — Wed, 02 Jan 2013 18:17:10 +0000

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

#page {
     max-width: none;
}

body {
	padding: 0;
}

tiagodovale on "Removing side page margins"

tiagodovale — Wed, 02 Jan 2013 16:26:55 +0000

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)

designsimply on "Removing side page margins"

designsimply — Wed, 02 Jan 2013 16:03:44 +0000

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

tiagodovale on "Removing side page margins"

tiagodovale — Mon, 31 Dec 2012 17:27:25 +0000

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...

designsimply on "Removing side page margins"

designsimply — Mon, 31 Dec 2012 16:37:14 +0000

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.

tiagodovale on "Removing side page margins"

tiagodovale — Mon, 17 Dec 2012 17:39:40 +0000

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...

castelinokelvin on "Removing side page margins"

castelinokelvin — Mon, 17 Dec 2012 08:44:07 +0000

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.

tiagodovale on "Removing side page margins"

tiagodovale — Wed, 12 Dec 2012 02:05:54 +0000

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