Submitted over 2 years ago

Simple price grid

Peter• 170

@PeterJan285

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Claire Calder• 310

@claire-ca

Posted over 2 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

Peter• 170

@PeterJan285

Posted over 2 years ago

@claire-ca Thanks! You were right

VladimirBrscic• 775

@VladimirBrscic

Posted over 2 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

Peter• 170

@PeterJan285

Posted over 2 years ago

@VladimirBrscic Thank you, its much better now

Please log in to post a comment

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