Submitted 11 months ago

Order-Summary-Component

Gerardo Garcia• 170

@GGSWEngineer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Frontend community,

Thank you for taking a look at my solution!

I feel like this was my best attempt at using media queries. The issue I had was that I felt like I picked the best point to break it into a desktop view (min-width: 1000px). Is it generally okay to pick the min-width when you FEEL like the application should be breaking or is there pattern-like sizes that most devs use?

Is the use of fixed sizes (px vs rem) used appropriately here? What are general things that we used px for and rem for?

Thank you in advance for all of your help, it is greatly appreciated!

Community feedback

Better5afe• 850

@better5afe

Posted 11 months ago

Hi there, congratulations on completing this challenge!

I have reviewed your code and it's nicely written and well organised. Keep it up!

When it comes to px vs. rem/em usage, the best practice is to use rem/em values for things like font size, padding, margins etc., so that the layout can be scaled up or down.

For breakpoints, I personally use values defined in the Bootstrap documentation, they seem to work in most cases. Here's the link.

Happy Coding!

Marked as helpful

Gerardo Garcia• 170

@GGSWEngineer

Posted 11 months ago

Thanks so much for the feedback! @better5afe

Please log in to post a comment

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