Design comparison
Solution retrospective
Using the grid-template elements to properly format everything.
What challenges did you encounter, and how did you overcome them?I originally didn't know to size the grid properly, so messing around with the amount of fractions helped me with that.
What specific areas of your project would you like help with?Mainly spacing within an element, such as line-spacing and padding.
Community feedback
- @SvitlanaSuslenkovaPosted about 2 months ago
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
add max-width in px or rem to <main>, it doesn't replace width;
0 - @NeoScripterPosted about 2 months ago
Hey, Oduwa! I checked your solution and here are the things I would improve:
-
Your parent container doesn't have max-width. As a result, if you increase the screen size, your grid elements expand, losing their shape. You can set max-width on the parent container to avoid it.
-
The solution doesn't implement the tablet layout. You can check the design file and use media queries to make the elements change their position for tablet screens.
Other than that, good job!
0 -
Please log in to post a comment
Log in with GitHub
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