QR code component using flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Mohamed Samir! 👋

  Congratulations on finishing this challenge! 👏

  Regarding your question, first changing the body font size doesn't effect how much 1rem in px. You need to change the html element instead. But, I don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. I suggest reading this article by Josh Comeau where he tells about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.

  Some suggestions.

  • I would recommend moving all the CSS code into a separate file. It's best to separate the HTML and CSS on its own file so that it is easier to maintain and read as well.
  • It is possible to make the site responsive without any media queries. For the card element (or in this case the .container element) to be responsive, all it needs is a max-width (no width). By doing this, it allows the card to shrink if needed and grow until it hits the max-width.
  • For the img element, I recommend styling it as the following. This will make it easier to work with img element. By default, the img element is an inline element which is hard to manipulate.

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  

  That's it! Hope you find this useful! 😁

  Marked as helpful

  1

  ---

  

  Mohamed Samir•70

  @mohamed-sameerPosted over 2 years ago

  @vanzasetia thank you so much for the feedback I appreciate it. the sources you provided were indeed helpful.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @mohamed-sameer No problem! 👍

  0