QR Code Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Sergio, congratulations for your new solution!

  Your solution is just great and you've an amazing first challenge. The only issue a found is regardin the image thats not allowing the container to scale and become responsive. You can fix that working the image values. See below how:

  To make your image fully responsive and respecting the container size while scaling and not growing more than the container size add display: blockand max-width: 100%

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

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Sergio,

  Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

  • You should use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Heading elements are not in a sequentially-descending order. use the headers in a chronological order. How you order headings dictates how a screen reader will navigate through them. As you go down a level, the number should increase by one, like a numbered list within an outline. In my opinion , I would use <p> instead of <h3>,

  • Images must have alt attribute. In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image.

  • Using percentages alone for widths is not really a good way, as you are losing control of the layout Consider using max-width to the card in rem instead. You don’t need to use any media queries.

  Aside these, Great job on this one. Hopefully this feedback helps.

  0