QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hola Poncho!

  Acabo de ver tu solución, amigo, y tengo algunos consejos para ti con respecto a la capacidad de respuesta de la imagen y el contenedor.

  Para corregir la capacidad de respuesta del contenedor, debe reemplazar width con max-width para que el contenedor sea flexible, tenga en cuenta que width es una medida fija y no permite que el contenedor crezca.

  Para hacer que la imagen coincida con el tamaño del contenedor, agregue max-width: 100% y display: block

  Aquí hay algunos cambios que hice para ti:

  .component_container {
      MAX-WIDTH: 32rem;
  }
  
  img {
      display: block;
      max-width: 100%;
  }
  
  

  Saludos desde Brasil!

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Poncho Ramos! 👋

  Nice work on this challenge! 🙌 Your solution is responsive and looks great! 👍

  I agree with what @saifion33 has suggested. Every page should have one h1 to allow the users to identify each page. But, since it is just a component, you can use h2 if you want. You can assume that it is a chunk or a part of a full website so the h1 might exist somewhere else.

  One suggestion I have is to improve the alternative text of the QR code. You can improve it by telling the users what the QR code is about. In this case, it is going to navigate the users to https://www.frontendmentor.io/. So, alternative text like "QR code to frontendmentor.io" is good enough.

  That's it! I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @alfonso-ramos

  One important thing that I just notice is that the html font size is reduced to 62.5%. 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 writes about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.

  Marked as helpful

  1
• 

  Azeem Saifi•370

  @saifion33Posted over 2 years ago

  Hi poncho your solution in perfect .

  If you want to improve here is some tips

  Replace <p class="bold">Improve your front-end skills by building projects</p> with h1 tag

  <h1 class="bold">Improve your front-end skills by building projects</h1>

  Happy Coding

  2