Skip to content
Submitted over 3 years ago

Responsive QR Code Component

Dizzy_Sloth•50
@TotallySly
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would like advice regarding Units of Measurement. I am not entirely sure which unit is the best and when. I have read a lot and it does appear to be a personal preference. I base this upon the many differing opinions.

I am yet to learn Bootstrap. And I only use 'vanilla' CSS (unless Flexbox is not considered 'vanilla'?!). I have read that, for the time it takes to learn Bootstrap, I should just consider continuing with more vanilla CSS and learn CSS Grid instead?

Thank you for taking the time to have a look at my work!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • kxnzx•870
    @kxnzx

    Hi @TotallySly,

    I would like to share what I have learned about Units of Measurements and how I use them + why:

    • REM Units for defining width’s of elements, margins, padding, and font-sizes (using this relative unit is important for accessibility settings, they adapt to the user's browser > people with visual impairment can zoom in to make the font-size/components on the screen bigger/smaller)
    • Pixels for shadows & borders (pixels are static > borders/shadows need to stay the same size always)
    • EM Units for media queries & padding in buttons (this is also a relative unit > the padding will auto adjusts to the font-size of the button)
    • % use this in combination with a max-width ( I personally mostly use this to define the width and min-height of the html element, you can also use vh or vw for this. However I have read somewhere that this is not the best practice to do yet)
    • CH Unit for defining the of width paragraphs

    There is a lot of info about this available, but this out of my head what I have learned for now. I hope you can get something out of this.

    Greetings, Kxnzx

    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