Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS Custom Properties and Calc( ) in Action

@MalexLucero

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@LeeConnelly12

Posted

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
Discord logo

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