card layout of QR code using HTML & CSS

Community feedback

• 

  Lucas 👾•104,300

  @correlucasPosted over 2 years ago

  👾Hello Zingy, congratulations for your new solution!

  Great solution and great design!

  The QR CODE image is getting distorted due the height you've add, to have this image responsive use display: block and max-width: 100% to make the image have a automatic height and 100% of the container width:

  .qrimg {
      /* height: 290px; */
      /* width: 100%; */
      border-radius: 10px;
      box-sizing: border-box;
      max-width: 100%;
      display: block;
  }
  

  Import the correct font for this challenge, its not a serif font, the font in this case is Inter. Check the starter files.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Sachin Kumar,

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

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

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

  • Page must have one level heading. You can use <h1> for class=”h2”.

  • Add min-height: 100vh to the body that let the body grows taller if the content outgrows the visible page instead.

  • width: 280px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem .

  • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  Overall, Excellent work! Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  zingy•100

  @Sachin1003RainaPosted over 2 years ago

  @PhoenixDev22 thanks for the review I'll definitely look into the issues and way of writing the code.... This is my first project i expect these kind of mistakes but I'll definitely try to solve in my next project.... Thanks again for the feedback it's very helpful....

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Sachin1003Raina Glad to help. Happy coding!

  1