QR component using HTML and CSS

Hi @Ambe-Mbong-Nwi 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

I have some suggestions you might consider to improve your code:

Regarding your question:

• Centering the element with position would make your element behave strangely on some mobile devices, "there's a chance the content will grow to overflow the parent". You can use flexbox or grid layout to center elements. You can read more about centering in CSS here:

Using flexbox:

body {
   /* max-width: 375px; Remove this*/
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

Using grid:

body {
   /* max-width: 375px; Remove this*/
   min-height: 100vh;
   display: grid;
   place-content: center;
}

Here are some other suggestions:

• Use the <main> tag to wrap all the main content in your solution instead of using <div> to improve the accessibility of the website.

• The alternative text must not contain hyphens, underscores, or the words "image", "picture" or "photo", because the image tag already provides enough information that it is an image

• To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

Above all, the project is done well👏. I hope those tips will help you! 👍

Good job, and happy coding! 😁

You can set: body { display: flex; justify-content: center; align-items: center; }

Looks nice 🙌🏻 If you want to remove the report issue try to replace your p tag with class first with the h1 tag