First Frontend Mentor Challenge using HTML and CSS Flexbox

Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

HTML:

• The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

If you want to learn more about the alt attribute, you can read this article.

CSS:

• Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 320px or 20rem to make sure that the component will have a maximum width of 320px on any device, also remove the width property with a percentage value.

• Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

main {
    background-color: hsl(212, 45%, 89%);
    /* height: 100vh; */ 
    min-height: 100vh; /* Use min-height insted of height*/
    display: flex;
    /* Add this to center the element instead of using margin: auto*/
    align-items: center;
    justify-content: center;
}

.qr-section {
    background-color: hsl(0, 0%, 100%);
    /* margin: auto; */
    /* width: 25%; */
    max-width: 20rem; /* Use a defined max-width*/
    margin: 1rem;   /* Add a margin to add some space for the container card and the screen edge on mobile devices*/
    /* height: 80%; */
    border-radius: 20px;
    /* padding-bottom: 10%; */
    padding-bottom: 1rem;
}

@media only screen and (max-width: 576px)
.qr-section {
    /* width: 70%; */
}

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Hi Karin. Congrats for completing the challenge. The overall solution is good. The only improvementn I will suggest is the space between the bottom border and the paragraph.

Good job.