How to remove page border

[JimParticipant Post count: 28]

I’m looking to have my child theme of the Mint theme hug the page browser window borders. I see the page background is #666, but I can’t locate anything in style.css about the border. I may have overlooked something though.

[themeweaverKeymaster Post count: 730]

Do you mean the box-shadow effect around #main which is defined in extend/layout.css

You need..

box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;

[JimParticipant Post count: 28]

I tried changing that. I didn’t notice a difference.

My goal is to remove the border or any padding on the mobile version so that the site content gets as much realty on the screen as possible. The top area could be cut so the logo/title is the first thing people see, and the side padding/border can be cut so as much cant be seen on the mobile site as possible.

It works fine on the Desktop: http://i50.tinypic.com/wuktn4.png

But takes up some space on the Mobile: http://i45.tinypic.com/207qfdj.png

Is it possible to differentiate from the mobile/desktop theme or would that complicate the HTML5 coding you have?

Thank you.

[themeweaverKeymaster Post count: 730]

This is done with media queries in extend\layout.css.

You will see different code for different sizes of browser window. All sizes inherit from default styles and then there are css rules to change behaviour on different sized windows.

There is some padding/margin around the page but removing this completely wouldn’t look great on all devices. It was put in for a reason. Also making changes may not be as simple as changing margin on a single element without affecting other issues and on other sized windows.

In a child theme you could create additional media-queries at the bottom of your child’s style.css to override any default behaviour of the parent theme.

[JimParticipant Post count: 28]

Alright, I’ll keep it how it is for now. Thank you.

[Author]

Posts