QR-component done using HTML/CSS

👾Hello Bryan, congratulations for your new solution!

Your solution is already perfect with flexboxI don't really think you need to change it but if you want. You can use GRID if you prefer as an alternative for flexbox even if flex is the best choice for this challenge, see the modifications I did to you code bellow:

.main-container {
    display: grid;
    flex-direction: column;
    /* position: relative; */
    align-items: center;
    /* justify-content: space-around; */
    /* height: 497px; */
    padding: 15px;
    max-width: 320px;
    background-color: white;
    border-radius: 20px;
}

REMEMBER, if you want some component or container responsive ever use max-width or min-width if you use widththe container will not grow because width is a fixed a value and the other two options are flexible.

👾@correlucas rating for this solution: ⭐⭐⭐⭐⭐

👋 I hope this helps you and happy coding!

Hello Bryan,

Congratulation on completing this frontend mentor challenge. Excellent work! I have some suggestions regarding your solution:

• In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image.

There are some unnecessary div’s have to be removed for clean code.

• Add min-height: 100vh instead of height: 100%to the body that let the body grows taller if the content outgrows the visible page instead.

• width: 320px; an explicit width is not a good way to have responsive layout . consider using max-width to the card in rem instead .

• height: 497px;It's not recommended to set height to component, let the content of the component define the height.

• Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.

• Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

• Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

The commented code should be removed.
/*You can add the flexbox properties and min-height to the body instead to center the component on the middle of the page.*/
body{
    display: flex;
    /* position: fixed; */
    /* top: 0; */
    /* bottom: 0; */
    /* right: 0; */
    /* left: 0; */
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #D5E1EF;
}

Overall, your solution is good. Hopefully this feedback helps.

HTML renders in column direction by default. So if you don't want to use Flexbox properties you could choose to not apply Flexbox at all. Just create some spacing with margins between elements.