Submitted over 2 years ago

HTML and CSS

Emmanuel Boluwatife Janet• 40

@Tifem

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

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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 :

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

Community feedback

darnomccode• 30

@dannymccabe

Posted about 2 years ago

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.

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