Skip to content
Submitted about 2 years ago

practice 10

blahblah•240
@blahking
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

It always takes me some time to choose a proper font-size, especially when I use rem to set element's width. I write css according to "mobile first". I want just to rewrite the html's font-size to change others width. It looks fine on the phone, however it looks not perfect on the desktop. So that I have to rewrite margin or padding on the desktop. Can you give me some tips to choose font-size between different devices? Thanks very much!

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    HI,

    Congrats on completing the challenge

    The fonts seem fine.

    If you remove grid-template-rows: 1fr 1fr; on the main tag the spacing issue should be fixed.

    Hope this is helpful.

    1
    blahblah•240
    @blahkingPosted about 2 years ago

    Thanks for your advice, I write grid-template-rows: 1fr 1fr; because I think they are same height at first. 😅 Now I found they are not same, I'll detele the code.

    0
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    @blahking no problem 🙌

    0
  • omar saleh•150
    @omarsaleh11Posted about 2 years ago

    I use the sass function to divide the px /16 so it returns as rem like that : rem(1200) == 31.25rem I write the first syntax and its returns to my CSS file as the second syntax, happy coding

    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