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

Single price grid vanilla css

nimbul30β€’ 110

@nimbul30

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


New to programming and I've been working thru these challenges. Learning tons so any feedback is welcome!

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello again Nimbul, congratulations for your new solution!

Your 3 cards structure is done, you need only to improve the alignments and how much the cards grow in the desktop version. See my tips for you below:

To fix your colors and the maximum width your card can grow (note that your card is growing too much)

Add also min-height: 100vh to align the child element to the parent height thats 100% of the screen now and flexbox for center the card.

See the changes below:

body {
    background-color: hsl(218deg 100% 96%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

πŸ‘‹ I hope this helps you and happy 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