Submitted over 1 year ago

Used CSS grid

@retailescapeartist

A solution to the Single price grid component challenge

Solution retrospective

I did have some issues remembering the CSS for Grid. I'm still not sure about styling, but I'm getting there. I'm working on finding better ways to visualize the separate components.

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,790
@danielmrz-dev
Posted over 1 year ago
Hello Daniel!

Your project looks great!

I noticed that you used margin: auto to center your card. I don't know if you are familiar with the many ways we can center elements in the middle of the page, but I'll leave it here, in case you don't know them:

You can apply this to the body:
```
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
```
You used this method above, but you didn't add justify-content:center;, that's why you had to use margin: auto; on the card. Both ways work pretty good anyway.

Or you can apply this to the element you wanna center:
```
.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}
```
I hope it helps!
Guilherme Santos•190
@guisantosfr
Posted over 1 year ago
Hi, Daniel! Nice solution. My suggestion for you is to add a little more margin on left and right sides.

Happy coding :)

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