Submitted about 2 years ago

practice 10

blahblah• 240

@blahking

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

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

@hyrongennike

Posted 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.

blahblah• 240

@blahking

Posted 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.

Hyron• 5,870

@hyrongennike

Posted about 2 years ago

@blahking no problem 🙌

omar saleh• 150

@omarsaleh11

Posted 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

Please log in to post a comment

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