Overview Solutions

Nicolás Órdenes

@nico-or

All comments

luisoliverosrdn•70
@luisoliverosrdn
Submitted over 2 years ago
QR Code Component - First challenge finished!
3
Nicolás Órdenes•50
@nico-or
Posted over 2 years ago
Hi. First of all congratulations on your first submission!

align-items

Regarding your issue with align-items: center. That property sets the position of it's childs, not the container itself.

If I understood correctly, you wanted to center de <div class="card_container"> with align-items: center. To do that you would need to nest the div inside a flex column. Something like
```
<body>
  <div class="card-container">test</div>
</body>
```
```
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
```
I always use the CSS-Tricks guides for reference with flexbox and grid. For example, the align-items entry in the guide.

Some other things I spotted on your solution

body element size

The body element isn't covering the whole screen, despite background color apearing in the whole screen (I'm actually surprised by that). That's because percentage-based sizes are measured relative to the parent container and the body doesn't have a parent. You need to use viewport sizes.
```
body {
  height: 100vh;
}
```
card_container width

I noticed that the .card_container behaves weirdly, specially around the media-query. I think you can get better results using the CSS clamp function.

I hope that some of that might have helped. Cheers!
Marked as helpful