Skip to content
Submitted almost 2 years ago

Order summary card component

Ralph•190
@delacruzralph
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

So far I have been copying the designs as close as possible, but I now realize that this isn't necessarily the best way to create responsive web pages. What's your workflow when it comes to styling something that you know will have to be responsive? (i.e. setting up widths with %, margin/padding with rem/em)

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Ralph! 👋

    In this case, the card only needs a max-width to be responsive to prevent it from filling the entire page. width: 90% works well on mobile view. But, I recommend removing it and setting padding on the <body> element instead. The purpose of doing that is to prevent the card from having full width and height on tiny screen sizes.

    I recommend using rem unit instead of em as the main unit in your stylesheet. em is relative the parent element and it can make it hard to maintain. That is because if the parent's font size is changed, you have to update the em value for the children elements.

    If the <body>'s font size is 16px then you do not need to specify it. It is already the default styling (the same as font-size: 1rem).

    I hope this helps. Happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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