QR Code Scanner | Frontend Mentor

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Saurabh, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  saurabh•200

  @akgec-saurabhPosted about 2 years ago

  @correlucas Thank you so much @correlucas I really appreciate it, I watched many videos but still many times I get stuck between max-width or min-width Thank you it will really help me to be a great designer.

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @saurabh-mech Hey! I'm happy to hear that, say me if works then! Keep it up =)

  Marked as helpful

  1