Single Price Grid Component

Community feedback

• 

  Thiago Souza•80

  @thiagorasouzaPosted over 3 years ago

  Hey Taha!

  Great markup and CSS code structure. Everything is simple and easy to understand.

  That being said, I have a few comments:

  • Setting a padding-top of 10vh on your .container element may be a waste of space on the mobile layout. Mobile users don't really have much screen space. Instead of setting a padding-top on the .container element, you could try to page center it (both on the desktop and mobile layout). You can look up the web for "centering a div in body element". I personally prefer to turn body into a flex container (display: flex), give it a height (min-height: 100vh), a vertical flow (flex-direction: column), align it's items to the center of the main axis (justify-content: center) and the same for the cross axis (align-items: center). For that to work, you need to remove margin: auto from your .container element;
  • Try horizontally resizing your window with Chrome/Firefox Dev Tools (F12). Your media screen breakpoint is pretty small. There's a point between 900px and 400px where your text begins to squeeze. You can either set a higher value for your breakpoint or change the way you set your .container width;
  • And I think you missed the Sign Up button hover state, but that's easy to implement.

  That's all! Good work! I would appreciate if you could give me your feedback on my solution too. If my feedback helped you in any way, feel free to upvote it :)

  1

  ---

  

  Taha•310

  @thaykrglPosted over 3 years ago

  @thiagorasouza Thank you for your suggestions. I will also comment on your solution as soon as I am available.

  1