Skip to content
Submitted over 2 years ago

Order Summary Card with Active Hover States

Ritesh Karankal•50
@ritesh-karankal
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

  • I used rems for margin and padding. What is the best unit to use for margin and padding rem or em?

  • I have given the container width in pixels. Should I use rem or % for giving it width?

Community feedback

  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 2 years ago

    Rems and ems are relative units based on the value you set as font size. em is relative to the parent container; whereby rem is relative to the root <html>-tag.

    I suggest u use max width instead of width for texts to responsively shrink. also there is a blog post link below for you to learn more. 👍

    https://medium.com/@sascha.wolff/dont-use-rem-em-for-paddings-margins-and-more-94e19026b000

    Marked as helpful
    2
  • Alexander Lippitsch•120
    @LipAlex1Posted over 2 years ago

    Hi Ritesh,

    I like the way you went about the project!

    Here are my thoughts on your solution:

    I noticed that the project folder contains 3 css files with only one of them being hooked up by a link tag in the head of the html file. I don't really get why the other two are there. If they have no functionality they should not be there, because in a real life situation that is dead weight on tcp/ip traffic and slows down the rendering of your site for no reason.

    I like that you used semantic html as this is good practice and adds to SEO. You don't need to classify or id <main> or <footer> tags, though, as they are supposed to be unique and you only produce redundant code.

    There is a slight overuse of the <div> element where you could easily use other semantic html (article, section) also for leaner code.

    Also, you may want to look at the design guide once more as there are :active states. The :hover states are good but there are color changes to be effected on :active state.

    Regarding your question with em, rem, %:

    When building responsive sites I recommend to use rem and max-width rules (also in rem). Make sure you understand the difference between rem and em. rem is the size set in the root element (html selector), whereas em means size in relation to the parent element. This difference is crucial to understand otherwise it will cause endless frustration at the most inconvenient moments.

    If you haven't already, familiarize yourself with media queries to set breakpoints for your design.

    Keep up the good work and happy coding!

    All the best,

    Alex

    Marked as helpful
    1
  • Ciceron•940
    @MarcusTuliusCiceronPosted over 2 years ago

    hey congrats on completing this solution:

    I'm not css expert but I believe rem and em are more font size units that will adapt to the end user browser settings. So if you use it for margin/padding end user will not have same result according their browser setting for font size. For padding/margin and for width/height I think it is a better practice to use unit like %, vw, vh, vmin, etc Those are all units related to browser size (except %) that will help you to have a smooth display on all screen size. It will still be necessary to use media query to adapt layout but this will help transition between breakpoint to look nicer.

    Hope this will help,

    Have a good day and keep up with the good work :D

    Marked as helpful
    1
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 2 years ago

    Your solution is pixel perfect but in smaller sizes it spans across the screen. You forgot to add margin to thee main tag to prevent the card from spanning the while screen on mobile. Hope you fix this good job👍

    Marked as helpful
    0

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