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

Order summary using flexbox

C4rlosβ€’ 410

@solracss

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Had little problem with paddings and overall html structure, but finally managed to did it. Still not sure if element spacing done on order plan is ok?

I encourage you to leave any comments regarding my code as it is win-win.

You practice code-review and I get feedback!

Cheers!

Community feedback

Boots πŸ˜Ίβ€’ 1,590

@adityaphasu

Posted

Hi! Good job on completing the challenge!πŸ™ŒπŸ»

Your solution looks brilliant!πŸ“ΈπŸ“Έ

One tip I can give you is that instead of using absolute units like px you should use relative units like rem, its better for responsivness.You can read about it more here ~

It might be tedious to go online and convert the exact pixel values to rem for the project so instead you can use a vs-code extension like px to rem to convert the px values you type in to rem instantly! ( I use it all the time πŸ˜†).

I hope this will helpful in your future projects.

Happy CodingπŸ•ΊπŸ»

Marked as helpful

1

C4rlosβ€’ 410

@solracss

Posted

@adityaphasu Yes and no, with padding and margin I tend to stick to px. https://medium.com/@sascha.wolff/dont-use-rem-em-for-paddings-margins-and-more-94e19026b000

For font-size I always use rem. For px to rem conversion I got my sass function that do all the math for me.

1

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