QR Card Challenge

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Vitório, congratulations for your new solution!

  Your solution its almost done and I’ve some tips to help you to improve it:

  In this case is better you import the image with <img> than using css background-image. Here's how you can setup the img responsiveness. A good 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 {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Vitório,

  Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

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

  • In my opinion, the image is an important content. As you have used CSS for the image, it’s not accessible anymore. The only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative 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.

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

  Hopefully this feedback helps.

  Marked as helpful

  0