Skip to content
Submitted almost 2 years ago

Product Preview Component Solution

Fabianthorsen•170
@Fabianthorsen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I tried using variables in a good way by extracting things such as border-radius, colors, etc. to reduce repetition. I also used the <picture> tag to avoid having to load images that are not supposed to be loaded, i.e. if mobile we only load mobile image and so on. I also tried using rem, em in a good way, but I am still struggling to figure out when to use which. I guess em for margins and rem for fonts?

Community feedback

  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there

    Yes, we mostly use em for paddings, margins and for dimensions, And rem for font sizes. It is not mandatory. we can use rem for margins, paddings And em for font size as well. But the different between rem and em is;

    em depends on parent font size and

    rem depends on html declared font size

    Learn more about it here

    Also, if you want to learn more about other CSS units CSS units

    I hope this was helpful 😊

    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