qr-code-component using HTML & CSS

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

Your solution is almost finished you've to fix only two things, the background and the alignment, here is my tips for you:

First of all use the correct color for the background:

body {
    background: hsl(212, 45%, 89%);
}

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 as reference.

body {
    display: flex;
    min-height: 100vh;
    background-color: lightgray;
    place-content: center;
    align-items: center;
    justify-content: center;
}

👋 I hope this helps you and happy coding!

Hello, Yusuf Babatunde! 👋

Congratulations on completing this challenge! 🎉

For this challenge, the styling of the card both on mobile and desktop is the same. But, the problem is on mobile view, the card is not in the middle of the page. I would recommend following the @correlucas's recommendation by making the body element as the flex container of the card. This way, the card will always be in the middle of the page regardless of the user's screen size.

I recommend using the modern CSS reset by Piccalilli every time you start a new project. This will help you get the base styling right.

For the card element (<div id="bg">), there is no need to set width. The card only needs a max-width to prevent the card from filling the entire page horizontally. Also, there's no need to specify height: auto since by default the element will adapt based on the height of the children elements.

I hope this helps! Happy coding! 😄