QR code component solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Ralph Custodio, congratulations for your new solution!

  👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  1.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      object-fit: cover;
      max-width: 100%;
      /* width: 100%; */
      border-radius: 0.625rem;
      /* max-height: 18rem; */
      /* max-width: 18rem; */
      display: block;
  }
  

  2.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

  3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Ralph Custodio•10

  @itsmeralph09Posted about 2 years ago

  @correlucas oww thank you so much Sir. I will note all of these for future reference.

  0
• 

  Madiha Khan•420

  @madkn1311Posted about 2 years ago

  Hello Raph,

  Great job on the design...!!!😊

  The image paths should have a forward slash instead of backward slash.

  Also, images should have an alt attribute for better accessibility for screen readers.

  Marked as helpful

  0

  ---

  

  Ralph Custodio•10

  @itsmeralph09Posted about 2 years ago

  @madkn1311 heads up, thank you so much Sir. The alt attribute, I forgot about it, thanks you so much Sir for your comments.

  1