QR Code with additional changes to responsiveness and accessibility

Community feedback

• 

  Rostyslav Nazarenko•560

  @rostyslav-nazarenkoPosted almost 2 years ago

  Hi! Great code!

  I found only a few issues with using absolute and relative units. I will explain as much as I can but here is a great article if you need more information.

  • Generally, you would want to use relative units like em or rem. Using rem is easier as it is based on the root font size which is by default 16px, but users can change it in the browser settings. em is based on the parent element font size that way it is harder to set precise font size, read more in the article.
  • In your code you set body { font-size: 15pt; }. pt is an absolute unit, which is used in print. In this case set font-size to 0,9375rem (15 / 16, 15 is your target size, and 16 is the default).
  • But then you set the font size of the p element to 1rem (and you override previous rule) which is 16px (by default) and h1 to 22px. This makes p change its font size according to user preferences and h1 would be stuck and not change its font size.
  • line-height: calc(1.27 * var(--header-font-size)); and line-heigth: 1.27; mean exactly the same.

  So, generally, people set font in rem to the body element which makes other elements inherit from body

  Marked as helpful

  1

  ---

  

  Liam Malby•20

  @liammalbyPosted almost 2 years ago

  @rostyslav-nazarenko thank you for your feedback! I have hopefully made some adjustments to the way I do things in the most recent challenge I completed :)

  0