Responsive QR code page using Html & Css

Hi @Iniy96 👋, good job for completing this challenge! 🎉

Here are some suggestions you might consider:

• Centering the element with position would make your element behave strangely on some mobile devices. There are two modern CSS techniques to center elements instead of position:

Using flexbox layout:

body {
   margin: 0;
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

Using grid layout:

body {
   margin: 0;
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

And remove all the position properties from the container:

.container {
    background-color: hsl(0, 0%, 100%);
    /* width: 20%; */
    max-width: 300px;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%,-50%); */
}

More information:

• The Complete Guide to Centering in CSS
• A Complete Guide to Flexbox (CSS-Tricks)
• How TO - Center Elements Vertically (W3Schools) |
• CSS Layout - Horizontal & Vertical Align (W3Schools).

.

• Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

Solution:

<h1>Improve your front-end skills by building projects</h1>

I hope those tips will help you.

Good Job and happy coding !