[Bug] Helper text loading as 14px at small screen widths
natalia-fitzgerald opened this issue · 1 comments
Helper text is loading as 14px at small screen sizes. Helper text should be 16px at all screen widths.
To Reproduce
Steps to reproduce the behavior:
- Go to '/design-system/components/helper-text'
- Click on '/design-system/components/helper-text#block-helper-text-1'
- Switch to small screen width view
- Inspect text - Loads at 14.22px
Expected behavior
Helper text should be 16px at all screen widths.
Task
Looking for a dev to update the styling of helper text (inline and block to 16px at all screen widths).
Screenshots
| Current mobile | Updated mobile |
|---|---|
Additional context
<small> is applied to the helper text which sizes the text as 0.888em. This works fine at desktop because the parent element is 18px in size. But at mobile the parent element drops to 16px and therefore the helper text drops as well (to roughly 14px). The helper text should be a consistent 16px at all screen widths.
The small tag here is to signify the use of side commentary. The ".888em font-size" is the result of improper variable use and/or miscalculation, or so it seems. The class combination .a-label__heading .a-label_helper is setting the size to "font-size: unit((@base-font-size-px / @font-size), em);" This will result in < 1 as base font is 16 whereas the headline is 18. The CSS will be updated with 1717, resulting in proper font size allocation.