Skip to content
Submitted almost 3 years ago

QR Code card challenge

Louie•170
@PaletteJack
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are some ways I can avoid hard coding sizes using pixels?

Do people use 100vh to center content vertically? Is there an easier/more acceptable way to do this?

Thanks for checking out my solution!

Code

Please log in to post a comment

Log in

Community feedback

  • Bernardus•1,095
    @BernardusPH

    Hey PALETTEJACK’S, People use min-height:100vh; in the body to let the body be 100% of the device height mostly, but you can use it with flex/grid to center vertically in the screen bc how can you move something vertically(not including position/transform) unless you have a set height? And yes its the easiest way and less hassle

    For your px problem lets give an example(also you can remove the card's height). Your card which is set at 280px width. There is nothing wrong with hard coding with px like this, but lets say your card had to change for mobile use, like it needs to be 200px instead? Then you need to use @media to fix that. If you really don't like hard coding with px then I would recommend using clamp which is awesome.

    Also just a tip but pls add *{box-sizing:border-box;}. less headache with width and padding

    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