Submitted over 2 years ago

QR Code card using HTML and CSS

@Ashxarya

A solution to the QR code component challenge

Solution retrospective

I would like to know how I can improve my CSS if possible. Another thing I am wondering is, when I add the text at the bottom as a footer, I would like for the card itself to still be at the center of the page, I was not able to figure out how to do that. Any help is appreciated.

Code

Please log in to post a comment

Community feedback

Krzysztof Rozbicki•370
@KrzysztofRozbicki
Posted over 2 years ago
Answering your question about the attribution. First be sure that your body has a
```
position: relative;
min-height: 100vh
```
First needed so you can position the child of body according to its parent (body), second one is just to be sure that your body is at least as high as the viewport(screen) of user. Then in the attribution class you put e.g.
```
position: absolute;
bottom: 0.5rem
```
Which means that your attribution will be always 0.5rem (default 8x) from the bottom of viewport You can read more about positioning - relative and absolute here: https://www.w3schools.com/css/css_positioning.asp And of course good old Kevin Powell: https://www.youtube.com/watch?v=P6UgYq3J3Qs

And i advice you strongly to test that yourself by simple divs and just have fun and testing a lot of stuff. Positioning is in my opinion crucial to understand and without it is simply not possible to get the design look as you want.
Marked as helpful

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