Submitted about 2 years ago

QR code component

Damian• 10

@Damianeks

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would be happy about feedback!

Community feedback

Patrick• 800

@PPechmann

Posted about 2 years ago

Hey @Damianeks,

congrats on completing your first challenge, it's looking very good 👍

There is a much easier way to center the card in this case.

If you give the body a min-height: 100vh to cover the full viewport and then give the .content-box a width, let's say of 20.6rem (according to the size you are aiming for), the card will be perfectly centered without having to specify the margins for the card, thanks to flexbox.

The code would look like this:

    margin: 0px;
    padding: 0px;
    background-color: hsl(212, 45%, 89%);
    align-items: center;
    justify-content: center;
    display: flex;
    font-family: "Outfit", "sans-serif";
    min-height: 100vh;
}
.content-box {
    box-sizing: border-box;
    background-color: hsl(0, 0%, 100%);
    padding: 15px 15px;
    border-radius: 20px;
    height: 550px;
    width: 20.6rem;
}

If you keep this in mind when centering something on the page, it will make your life much easier and the code cleaner.

If you have any questions, let me know, I'm here to help 😉

Happy coding 💪

Patrick

Marked as helpful

Abdallah Ahmed• 60

@AbdallahGO

Posted about 2 years ago

Hi Damian . I see your project and it was perfect, but this code :

<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://www.frontendmentor.io/profile/Damianeks">Damianeks</a>. </div>

you should separate it from <div class="text">.....</div> and put it outside the container to do this you can make :

<div class = BIG container> put your container + all .attribution </div>

I hope that helped you

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hi Damian, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

Note that for this challenge all you need is a single block to hold all the content, can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

You’ve used px as the unit for sizes but the problem with pixels is that its not optimized for multiple devices and screens. So a good fit its to use rem or em that have a better performance and make your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

✌️ I hope this helps you and happy coding!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord