Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single price grid component with flexbox

Sabrinaβ€’ 75

@sabrinalagasse

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know my solution is probably a little messy and redundant, any advice appreciated!

Community feedback

Gerben Dolβ€’ 3,115

@GerbenDol

Posted

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

@sabrinalagasse

Posted

@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

@rcarlosalba

Posted

Well done!

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

1

Sabrinaβ€’ 75

@sabrinalagasse

Posted

@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

@eduardodangelo

Posted

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

1

Sabrinaβ€’ 75

@sabrinalagasse

Posted

Thanks for the kind words, Eduardo! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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