@AgataLiberska
Posted
Hi! I think setting those flex styles on a container class is definitely a good idea. It makes it more reusable and if you were to add something else in the body, it wouldn't be affected. You could also add justify-content:center
to your styles there to center horizontally - in your solution this is done with margin:auto
which also works fine, but in a bigger project if you wanted to reuse this, I think I would prefer all centering styles to be under one class (rather than a container and the component itself if that makes sense).
Another way to achieve the same result is to use display:grid;place-items:center;
- just a matter of preference which one you go for.
What I would like to see in your solution is some more semantic tags. so your container could be a <main> and then for the card itself, I would add an <article> tag inside the container. Also don't forget to add a width and height to your image :)
If we're also looking at accessibility, it might be a good idea to add a link around the QR image :)
Marked as helpful