responsive css padding

[gerdydog]

Hi guys,

Can anyone tell me how to add padding to the left and right sides of the blue boxes when the page has been moved to a smaller width and has changed to the responsive view. At the minute if I try and add padding the boxes move outwords and beyond the sides :(

here is the link http://www.reachmediani.co.uk/problem/

Any help would be greatly appreciated.

[waylaid]

At the moment when your media query kicks in the div width becomes 100% + padding.

Use **box-sizing: border-box;** so browsers won’t add the padding to the overall width.

This explains it better (and has all the browser pre-fixes):
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

[CodeGraphics]

You have to subtract the padding from the width.
If you want the width to be 100% and you want to give it a padding of 5%, then you have to change the width to 90%. And so on.

[gerdydog]

Thanks for the help guys. CodeGraphics I used your technique and it worked fine.

Thanks again :)

[Author]

Posts