Submitted over 2 years ago

Responsive q r code

Parthib45•220

@Parthib45

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Tried my best, hope to get some feedback

Community feedback

Fluffy Kas•7,715
@FluffyKasPosted over 2 years ago
Hey,

This component is so small it's kinda cute >.< Now, to give some constructive feedback as well:

To center a component, you could add this to the <body>: display: grid, place-items: center, min-height: 100vh (height here is needed for vertical alignment). If you prefer, you could use flexbox instead, it works just as well.

You could increase the width of your box. By using max-width you can make it responsive, although it's not really required for this challenge. Defining height usually isn't needed (the above mentioned min-height is an exception that you'll rarely need to use, unless you're centering a solo component). All html elements have a default height, so it's best not to overwrite them, as that in best case does nothing (like this case here) or in worst case can cause an overflow. If you'd like to increase height, you could add padding instead.

align-items and justify-content properties only work with grid or flexbox but not with display: block.

You can add max-width: 100 and height: auto to your images to make sure they resize for all screens while keeping the original aspect-ratio.

To define padding you can use the padding shorthand. So for the "opacity" div you could go padding: 0 1rem 1rem 1rem instead of the 4 lines of code you wrote.

There's no need to wrap the text and the title in divs, they do just fine without.
Marked as helpful
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