Qr component using html and css

Community feedback

• 

  Joseph Jeremiah•120

  @JerryDcodemasterPosted about 2 years ago

  First u need to put all your HTML code in a parent container or element. Also try playing with the height to understand better. Then target your body in the CSS below👇🏻

  body { display: flex; justify-content: center; align-items: center; height: 100vh; }

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Chibuikem8Kalu, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  1.Add the alt text to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---> <img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">

  2.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

  3.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

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

  4.I think is a better choice you used flexbox to align it, here;s a good content explaining the alignment https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

  ✌️ I hope this helps you and happy coding!

  0
• 

  AbdellahArs•20

  @AbdellahArsPosted about 2 years ago

  to center the card on the screen. you need to set the height of the container of the card like (body) to 100vh. body { hieght: 100vh; display: flex; justify-content: center; align-items: center; }

  0