Single price grid component with flexbox

Community feedback

• 

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  Hi Sabrina! There's one tip I'd like to give! 😁

  Right now you're having to write a lot of code for the border-radius on each corder for all the different parts. This makes it:

  • Harder to maintain (if you want to change the radius you need to do it in multiple parts of your CSS)
  • Harder to make it responsive properly

  What I'd suggest you do is simply add the border-radius: 5px; to the .container along with overflow: hidden; and remove all the other border-radius properties on the inner-parts.

  This way there's only one class to manage your border-radius on and no matter the layout of the bits inside the border-radius will always be on the right corners! 😁

  Hope to see more of your work soon! 💪🏻

  1

  ---

  

  Sabrina•75

  @sabrinalagassePosted over 4 years ago

  @GerbenDol Thank you so much for the tip! I was thinking there must have been a way to just apply border radius to the container, but didn't know to use overflow: hidden;. Thanks again!

  1
• 

  Carlos Alba•125

  @rcarlosalbaPosted over 4 years ago

  Well done!

  It's a great job! but why don't you use display grid? it's just another option.

  1

  ---

  

  Sabrina•75

  @sabrinalagassePosted over 4 years ago

  @rcarlosalba Hiya! Grid is a great option for this project, I am however more insecure about flexbox so I want to get as much practice as possible using it! :) Thank you!

  0
• 

  Eduardo D'Angelo•70

  @eduardodangeloPosted over 4 years ago

  Hey Sabrina, your solution looks nice & less CSS code, keep up the great job!

  1

  ---

  

  Sabrina•75

  @sabrinalagassePosted over 4 years ago

  Thanks for the kind words, Eduardo! :)

  0