3 |*| Core elements: Sizing and padding
9 font-family: sans-serif;
24 |*| Responsive form layout
30 * Within the form, fields can be placed in <div> elements with
31 * class "form-field". Each can also have an additional class of one
32 * of "small", "medium", or "large". These classes will be used to
33 * select either a 1- or 2-column layout for each row depending on the
34 * width of the screen.
36 * Expected layout is as follows:
38 * "large" rows: 1-column on all devices
40 * "medium" rows: 2-column on wide displays (laptop/desktop/tablet)
41 * 1-column on small display (phones)
43 * "small" rows: 2-column on all devices
45 * Finally, a class of either "left" or "right" will select which
46 * column the field should appear in for fields that end up in 2
52 grid-template-columns: 49% 49%;
56 .form-field.small.left,.form-field.medium.left {
60 .form-field.small.right,.form-field.medium.right {
66 grid-column-end: span 2;
69 /* For a narrow screen, use a single-column for medium form fields. */
70 @media screen and (max-width: 600px) {
71 .form-field.medium.left,.form-field.medium.right {
73 grid-column-end: span 2