Design comparison
Solution retrospective
Maybe there are some mistakes, but I'm still learning. What should i change?
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Andres Guevara, congratulations for your new solution!
Here's some tips to improve your solution:
First of all you need to make smaller the gap between the cards, a good way to do that is giving the container a limit of how much it can grow, you can give it to the container using
max-width
and set the spacing usinggap
and usemargin: 0 auto
to force the alignment.Here's the changes I give your code:
@media (min-width: 1200px) .container { max-width: 1110px; /* width: 100vw; */ margin: 0 auto; height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); justify-items: center; align-items: center; }
Then you need to remove the grey background from the container and insert it to the body to make the color fill all the screen.
π I hope this helps you and happy coding!
0 - @SurajHadagePosted about 2 years ago
To make color lines on each card you are using pseudo elements. I will recommend to use border-top property:
.card--green { border-top: 2px solid green; }
I will suggest to not wrap
<header>
inside<main>
.0
Please log in to post a comment
Log in with GitHubJoin 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