Submitted about 1 month ago

QR Code Component Using HTML and CSS

isaiahp04•80

@isaiahp04

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

The only challenge that I've encountered is centering a .card and I overcame it by using flex on the .card-holder and setting its height to 743px

Community feedback

Akiz-Ivanov•120
@Akiz-IvanovPosted about 1 month ago
Hey i'm relatively new to the front-end development. Great job on the solution.

What i use for centering the container on the screen and what i've seen other people use is "min-height: 100vh" on the parent instead of "height: 743px". Keep the flexbox and adjust vh value as you best see fit.

Also, there are a few new variations of "vh" designed to handle different situations:

dvh (Dynamic Viewport Height), svh (Small Viewport Height), lvh (Large Viewport Height)

Use them as you see fit and feel free to do some research on the best situation to use them, seems like dvh and svh are pretty good.

Looks like in figma design the border-radius on the card container is slightly bigger at 20px. Have fun on your front-end journey.
Marked as helpful
0
Iryna Kokolius•120
@ikokoliusPosted about 1 month ago
Hello,

first of all, awesome that you are learning and sharing with community,

I can give you a tip with centering something with Flexbox in a body: ...

...
<body> <div class="card"></div> </body>
That way when you resize your page, your component will stay at the dead center. Your fixed height (743px) solution doesn't allow for resizing.
0

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