Skip to content
Submitted almost 3 years ago

CSS Custom Properties and Calc( ) in Action

bem
Manuel Lucero•140
@MalexLucero
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Did you take a mobile first or desktop first approach. What did you start editing first and why?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • P
    Lee•230
    @LeeConnelly12

    Using calc() to offset the attribution text at the bottom of the page, smart!

    Also love the use of BEM classes, great way to structure CSS.

    I started on mobile and added classes to the <body> to center the page's content so I could see the QR component easier while building it.

    As you know the size of the QR code image, you could set the width and height attributes to be 280, doing this means you don't get any layout shifting while the image is loading.

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