StackExchange
Checkbox mis-alignment on mobile views
Describe the bug Checkbox mis-alignment on mobile views
To Reproduce Steps to reproduce the behavior:
- Go to https://stackoverflow.design/product/components/checkbox
- Resize viewport to less than
640px
Expected behavior Checkboxes to be aligned with their labels
Screenshots
Example Checkboxes on Medium vs Small Screens
Zoomed in example of checkboxes with alignment lines
Example of checkbox itself being resized on small displays
Some important styling rules impacting this currently
Desktop (please complete the following information):
- OS: Windows
- Browser Chrome
- Version 101
Additional context
The culprit looks like it's the fact that we shrink the font to 11px for all screens under 640px
Worth noting that the main site actually has an additional edge case here. The checkbox inherits it's font from its parent, so if it's not nested in something with an explicit font, it'll get downsized 2px as well from 11px to 9px- this doesn't show up on stacks demo page, because the example panels set thefont-size` explicitly.
Hi @KyleMit! I think I found an issue and I would like to suggest possible changes. Is there any real example outside Stacks? I could not find any checkboxes on http://stackoverflow.com/.
That would be helpful. Thanks!
