Single Price Grid Component Solution

Community feedback

• 

  Abdullah Nassif•405

  @AbNassifPosted over 3 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.

  Marked as helpful

  1

  ---

  

  Abdulrhman Kotb•395

  @abdo-kotbPosted over 3 years ago

  @AbNassif Thanks a lot. 😊

  Your comment motivated me and your suggestions are helpful. I really appreciate that. 🙏

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Overall looks good ⭐⭐⭐⭐⭐

  Marked as helpful

  1

  ---

  

  Abdulrhman Kotb•395

  @abdo-kotbPosted over 3 years ago

  @palgramming Thanks a lot. 😊

  0