Submitted almost 3 years ago

Semantic HTML5 CSS Grid

accessibility, tailwind-css

Adesokan Muhammed•60

@ambmamo

A solution to the Stats preview card component challenge

Preview Code

Solution retrospective

I would appreciate corrections on this project, especially the mobile view because I'm not sure of the positioning of the whole project in the mobile view. I would appreciate it if I get the best practice for it.

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello Adesokan Muhammed, congratulations for your solution!

Your component is almost perfect, to align this component is better you use just flex instead of aligning it with margins, because you've less control when the media query gets active. You can use the simple approach aligning the component with the body using flexbox and its alignment.

Use this to align the body and then the component:
```
display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}
```
For the overlay effect you can use:
```
img {
mix-blend-mode: multiply;
opacity: 0.8;}
```
But note that the image should be used as <img> or picture in the html.

Hope it helps happy coding!
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