Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

10_single-price-grid

@DaliborStolarski

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

romila 3,570

@romila2003

Posted

Hi Dalibor,

Congratulations 🎉 for completing this challenge, your Grid component looks great, and it is great that it is responsive. There are some issues/suggestions I would like to address:

  1. Even though it is great that you wrapped the footer with the right semantic, you should also wrap the main content within the main tag e.g. <main class="container"></main>
  2. When adjusting the screen size from mobile to desktop, I would suggest removing the padding property on the body and write padding: unset; as this will cause the box to look very squashed. If you want to center the card in desktop, then I would suggest using the flex property instead e.g.
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

Your box-shadow looks quite strong therefore I would encourage you to change the value to something like this e.g. box-shadow: 10px 10px 10px rgba(0, 0, 0, 10%);. Also, I would encourage you to use a different background-color as one of the cards is white therefore, it would kind of blend it to the background.

Overall, great work and wish you the best for your future projects so keep coding 👍.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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