Single Price Grid Component Solution

Community feedback

• 

  Abdullah Nassif•405

  @AbNassif

  Posted almost 4 years ago

  Greetings,

  This looks quite amazing, you're really skilled. I learned quite a lot from you while reviewing your code.

  Frankly, the only problem you're dealing with is that you have to scroll to view the whole card, and the card could be perfectly aligned in the center without the need of scrolling(This could cause problems in real-life cases as whitespace is really important).

  To fix this, add a width of 100% and a height of 100% to the head and body( I saw that you tried to align the content in the center when you applied the align-items property in the body, but the reason it didn't work is that the body wasn't taking the full space of the page and those properties above will fix that).

  But this will cause problems with the media query when the screen gets smaller(The upper part of the card won't be visible as it's gonna be shoved on top of the page) To fix this you can add (height:100%) to the .main in the 767px media query you wrote, and it will take it's children's height accordingly and wrap around it responsively.

  Ps. Great job on adding animations to the attributes, it took me by surprise :).

  Overall, great work! keep it up.

  11

  Marked as helpful
• 

  P

  Patrick•14,265

  @palgramming

  Posted almost 4 years ago

  Overall looks good ⭐⭐⭐⭐⭐

  11

  Marked as helpful