Survey Form - Checkboxes doing weird things

HTML-CSS
1

Basically done with my survey form, but my checkboxes don’t always align. When making the screen smaller (and thus activating the media query), three boxes in the .weapons section move so they’re no longer aligned with the others. “Shortbow and Arrows”, “Longbow and Arrows”, and “Crossbow and Arrows” all take up two lines at that point, so I assume that’s why they move. But is there something I can put in my code to fix this? Using grid-template-rows to adjust the height of the boxes doesn’t fix it.

Link to my project: https://codepen.io/sierragreen/pen/VwMOXVW?editors=1100

2

Using text-align: left; ONLY in the media query will fix the problem. It needs to be done because the elements in the grid are <label> elements. A letter or two might start appearing under the checkbox.

3

Thank you so much! It worked :smiley:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.