QR-code-component using FLEXBOX

Some recommendations regarding your code that could be of interest to you.

• When you use flexbox in the body, you don't need to use flexbox in the .box to center the card because it doesn't work
• If you use max-width instead of width, the card will be responsive
• I adjust the padding a little bit

.box {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* width: 390px; */
  max-width: 300px;
  /* padding-bottom: 35px; */
  padding: 1.2rem 1.2rem 2rem;
  /* border: 0.5rem; */
}

• In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:

img {
  /* max-width: 100%; */
  width: 100%;
  display: block;
  border-radius: 0.7rem;
}

• You don't need to use width for .description because it prevents to make the card responsive if you use it

.description {
  /* width: 265px; */
}

Hope I am helpful. :)

Hello there👋!! Congratulations on completing this challange.

• I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Image element do not have alt attributes or you leave it blank

for example code

<img src="images/image-qr-code.png">

In this code you should add alt in your code

<img 
  src="images/image-qr-code.png"   
  alt="qr code"
>

• This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

I hope you found this helpful! 😊

Happy coding🤖

Hi 👋, I leave this here in case you want to take a look:

HTML 🧱, ACCESSIBILITY ⚖:

🔹The main content of every document (the whole card in this case) should be wrapped with the <main> tag. And it caught my attention that you gave the 'heading' class to the first line of text but you used <p>, doesn't it seem more appropriate to use an <h1>?

🔹The image is meaningful and therefore the alt text should give a good description in case the user cannot see it for some reason. An empty alt attribute is the way to set an image as decorative, which will be ignored by a screen reader.

CSS 🎨

🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

If you find this hard to get used to, you can simply start by using rem (1rem = 16px), it's just a matter of habit.

🔹You don't need to use font-weight for the description as 400 is the default value for normal font.

Please let me know if you disagree with something or if you would like more information on any of these topics.🙂

Regards