Skip to content
Submitted almost 3 years ago

Simple price grid

Peter•170
@PeterJan285
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Claire Calder•310
    @claire-caPosted almost 3 years ago

    Hi Peter,

    I think your issue is that on your .container you have set a fixed size for your grid-template-rows to 240px, so in the smaller screen sizes, the content of card one grows larger than that and that is why your content cuts off.

    You could either change your grid-template-rows to 1fr or remove the grid-template-row completely and let the grid set the rows implicitly.

    Well done on the rest of your solution - it looks good!

    Marked as helpful
    1
    Peter•170
    @PeterJan285Posted over 2 years ago

    @claire-ca Thanks! You were right

    0
  • VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi Peter, on <body> you may want to replace 'height' with 'min-height' instead. Furthermore on .container class you may want to remove 'grid-template-rows' property altogether because that is actually fixed height in working with grids. Happy coding.

    Marked as helpful
    1
    Peter•170
    @PeterJan285Posted over 2 years ago

    @VladimirBrscic Thank you, its much better now

    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