QR-Code-Component (Html, Css, Sass)

👾Hello , 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:

Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox. The first step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) aligns the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

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

Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

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.

✌️ I hope this helps you and happy coding!

Hello, Carlos Benavides Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <footer> to wrap your code, instead of div. like

<footer class="attribution">
</footer>

This would help improve accessibility.

• add the below code to the body. It will center everything

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

• remove margin: 60px auto; from .main-container. just add margin-bottom: 2rem;

I hope it will work. Happy coding.