Skip to content
Submitted about 3 years ago

HTML and CSS

Emmanuel Boluwatife Janet•40
@Tifem
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The area i was unsure or let me say i don't understand is in my css where height: calc(100vh - 1px); though i was able to finish this challenge with the help of a tutorial video and i learnt new things which are :

  1. How to add an image together with the title
  2. Declaring a :root for the colors i will be making use later on
Code

Please log in to post a comment

Log in

Community feedback

  • darnomccode•30
    @dannymccabe

    Hey, "height: calc(100vh -1px);" calc means calculate. 100vh means the full height of the screen. So on desktop or mobile, the height will always be 100% of the screen. Calculating the height by subtracting 1px will return the size of the screen, minus one pixel. The benefit of this is that CSS will convert 100vh to a pixel value. Pixels are better supported across browsers and vh or vw units can create unexpected issues in some places. Hope that is 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