Skip to content
Submitted about 3 years ago

stats card

Daniel Callaghan•120
@xiaoniuniu89
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Struggle with what measurements to use in CSS - any tips or recommendations for tutorials that help solidify it in your head would be great.

Community feedback

  • Adrian•190
    @ohsitePosted about 3 years ago

    Hi, Try not to use fixed units - pixels. Use EMs, REMs, % and viewport units. When it comes to CSS i tend to use html: {font-size: 62.5%}, because most of ppl have 16px set as browser default, so when I style html tag this way my 1REM is equal to 10px.

    Visit Kevin Powell's youtube channel to learn more about units and CSS in general.

    As for this particular solution to match the width I think I've used 80% of body. so width: 80%; on container.

    Hope It will be helpful, peace.

    Marked as helpful
    0
    Daniel Callaghan•120
    @xiaoniuniu89Posted about 3 years ago

    @ohsite Thats awesome, thanks, I will look into it and keep in mind for the future. Thanks so much.

    0
    Daniel Callaghan•120
    @xiaoniuniu89Posted about 3 years ago

    @ohsite Hi, Thanks for the recommendation - I watched some of Kevin Powells videos about relative widths and learnt a lot - I was able to do another challenge in less than half the time and felt way more in control while doing it! Feel a bit stronger with measurement units after that!

    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