Responsive qr code component using CSS flexbox

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 2 years ago

  Great feedback from @MelvinAguilar there! The only things left to add are

  • don't set a width on the card. Use max width instead. As soon as I change font size on this everything overflows the screen because the width has been limited like that. You want the component to be able to shrink if it needs to
  • border-box goes on everything * not just on the body. This is part of a standard css reset. It's good to include one at the start of every project's stylesheet. Josh Comeau and Andy Bell both have good modern examples of css resets if you want to use one of those. They also do things like set img tags to display block max width 100%
  • don't style on IDs. It's not what they're for and can make your css specificity too hard to handle on bigger projects. Use single class selectors as much as possible
  • just as font size must never ever be in px (really important!) neither should line height or letter spacing. They always need to scale with the text. Line height is usually unitless like 1.5 and letter spacing (although you will rarely have to use that) is usually in em

  I hope this helps

  Marked as helpful

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  Alt text 📷:

  • The alt attribute should not contain underscores or hyphens, it must be human readable and understandable.

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here.

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1