Skip to content
Submitted about 2 years ago

QR Code Component

jmurrii•10
@jmurrii
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Couldn't work out why the margin for the h1 was different for rem and em.

I thought that the h1 should inherit the font-size from the html element where I set the font-size to 62.5% ?

Code

Please log in to post a comment

Log in

Community feedback

  • Rohit Deshpande•870
    @rohitd99

    Hi jmurii

    Congrats on completing the challenge.

    I have a few suggestions for making your solution responsive.

    1. Firstly instead of height : 100vh; use min-height : 100vh; so that the body can expand as per content.
    2. Add padding: 2rem; to your body so that at mobile sizes the card isn't covering the entire screen.
    3. I think main element would be more suited than section the card is the only content and there are no sections as such.
    4. Regarding your question of h1's size inheritance , I think this stackoverflow answers it precisely. Answer.

    Good luck for other challenges

    Marked as helpful
  • P
    John Mirage•1,590
    @john-mirage

    Hello,

    Root EM watch the html element, EM watch the element itself or the first parent that has a font-size even by default.

    My guess is that if you have REM your h1 watch the html element so it will be relative to 62.5% and if you have EM it will be relative to the default size of a h1 (h1 has a default font-size)

    Marked as helpful

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