Skip to content
Submitted over 2 years ago

CSS Custom Properties and Calc( ) in Action

Manuel Lucero•140
@MalexLucero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Lee•230
    @LeeConnelly12Posted over 2 years ago

    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.

    0

Please log in to post a comment

Log in with GitHub

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