@StephenYu2018
Posted
I liked the sizing of the component, image and texts. I'd also like to give a few suggestions for what you can do in the future:
alt
attribute of<img>
represents alternative text that is displayed in place of the image when the browser cannot display that image for some reason/error. A better and more descriptive alt text for the<img>
would bealt="QR code to visit Frontend Mentor"
- Prefer using
rem
measurements instead ofpx
measurements for sizing.rem
calculates its measurement off the font size of the root element (which ishtml
). The font size of the root element is dictated by the browser and can be changed by the user. While the default is16px
on most browsers, users can choose to make it larger, possibly because most text would be too small to read. By sticking withpx
measurements, you remove that capability from the user, as the text won't scale larger when the user chooses larger font sizes. Instead the text will remain the same size.- Also, do not style
html
font size usingpx
to change how the root font size appears. That also removes that feature from the user as well. If you want the root font size of your page to appear at a different size:- Use percentage units
%
- Divide your apparent root font size with the actual default root font size
- Example: If I wanted my root font size to appear at 13px instead of 16px, I would do the following calculation:
13px / 16px = 0.8125 = 81.25%
- The final CSS property would be
html { font-size: 81.25%; }
- Use percentage units
- Also, do not style
Marked as helpful
@visualdenniss
Posted
@StephenYu2018 @momin-ctg Regarding % and the 62.5% hack, i'd recommend reading this article written by Grace: https://fedmentor.dev/posts/rem-html-font-size-hack/
She talks about the negatives and cons of that % hack and offers some better alternatives.
@momin-riyadh
Posted
@visualdenniss I checked by put two value (62.5%, 81.25%) in my recent challenge! Yeah, both have pros and cons!!
@StephenYu2018
Posted
@visualdenniss It was a good read. I forgot that not all font sizes inherit and wasn't aware of the plethora of maintainability concerns this would cause. Thanks for showing me the article.