mobile friendly screen size using css @media query

👾Hello Hakizimana, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

I saw that you've used position: absolute; left: 40.25%; top: 15.25%; to try to align. My advice for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body.

body {
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

Remove these properties to make the alignment work:

.square {
    max-width: 258px;
    /* height: 424px; */
    background-color: hsl(0, 0%, 100%);
    /* position: absolute; */
    /* left: 40.25%; */
    /* top: 15.25%; */
    border-radius: 3%;
    /* padding: 0 10px 10px; */
}

To make your image fully responsive add display: blockand max-width: 100% :

img {
    max-width: 100%;
    display: block;
    border-radius: 3%;
    /* width: 250px; */
    /* height: 250px; */
    /* position: relative; */
    /* top: 3.625%; */
    /* margin-bottom: 10.625%; */
}

👋 I hope this helps you and happy coding!

Hello there! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉

I would recommend fixing the title of the page by following the tutorial from World Wide Web Consortium (W3C) - Web Accessibility Initiative (WAI). The title is the first thing that users will see on their browser's tab and it is often the information that gets pronounced first by screenreaders. So, it is important to get it right.

Also, the alternative text for the QR code should not be hyphenated (not like code). I suggest improving the alternative text by removing those hyphens and also adding more details about the QR code. Tell the users about the QR code. This way, the users won't have to guess about it.

To place the card in the center of the page, I recommend using a flexbox or grid. These modern techniques are more robust than absolute positioning and require less code to implement. I recommend using the body element as the main container of the card.

I hope this information is useful! 😄

Bonjour, félicitation d'abord pour ce petit projet !

Pour la réactivité tu peux t'aider avec Flexbox ( ou bien t'aider d'un framework comme bootstrap, la documentation est complète ).

Il y a un petit jeu disponible ici pour t'apprendre le concept flexbox : https://flexboxfroggy.com/#fr Je t'encourage pour la suite !