Have you ever had trouble selecting a radio button or checkbox on your mobile phone?
Two aspects of web forms that often get overlooked for mobile page views are the ‘tap size’ of radio buttons and checkboxes, and the spacing between these elements. The first dictates the target area you have to tap and the second can mean you select the wrong option by mistake. Fortunately both are easy to solve.
The tap size can be increased by changing the width and height for these elements in your mobile breakpoint:
input[type=radio], input[type=checkbox]
{
width:40px;
height:40px;
}
Then just make sure spacing between radio buttons and checkboxes is sufficient to avoid selecting the wrong one.
If you have labels associated with the radio/checkbox elements (which you should) make sure the additional spacing includes these.
Assuming the above style is in the ‘mobile first’ part of your media queries you’ll need to reset the width and height to ‘auto’ for other view sizes.