Submitted about 4 years ago

Stats preview card component

@bogdiusf

A solution to the Stats preview card component challenge

Solution retrospective

Seems I have faced pretty major problems with dynamic responsiveness (container relative to device viewport, and child elements relative to container/parents). If anyone would be so kind to give me a piece of advice, based on the code i wrote, on how to not hard-code these things with N @media queries, I'd very much appreciate that!

Thank you!

Code

Please log in to post a comment

Community feedback

Rohit Purkait•460
@codeswithroh
Posted about 4 years ago
To place your whole container at the center of the screen just add
```
display: grid;

place-items: center;
```
in your body tag. It will save you from using position:absolute.

And for the responsiveness try setting a flex-basis with minmax which will help you a lot in responsiveness.

You can check out my solution as well (https://github.com/codeswithroh/stats-preview)
Aicha Nsangou Mama Awouolou•15
@Aicha-Nsangou
Posted about 4 years ago
Bonsoir, j'ai essayer de regarder ton coder mais sans commentaire c'est pas facile. Pour centrer il y'a plusieurs méthode, perso j'utilise : La position : absolute ; Top: 50%; Left:50%; Transform:translate (-50%,-50%);

Ce bout de code centre tous les éléments ^^ J'espère t'avoir aider de mon mieux:)

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