While working on a new website I added an enquiry form. The form needed to be responsive, so I set the input fields to 100%. However, padding is added to the width, meaning if your padding-left is 10px, your form width will be 100%+10px… and if you have a 1px border… that’s added on too. The result while viewing on a mobile is the form running over the edge of the screen (or whatever wrapper/container you have).
The solution I’d usually use is calc, but it’s much more time consuming and feels wrong to ‘hard code’ the widths. Instead, you can use the box-sizing property to change the box model* so that padding and border are included in the width. Incredibly simple. This won’t work on I.E.7 and below, but in this instance the css is for small mobile screens (less than ~460px, I think), so I.E.7 won’t be using 100%, but a fixed pixel width.
width:100%
padding-left:10px
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
Alternative to using calc to remove the padding.
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
*changing the box model, who knew!?