Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Information
  • Screenshot
  • Links
• My process
  • Built with
• Author
• Credits

Overview

Information

This is a challenge present on Frontend Mentor which is about recreating a QR code display on a site.

You may access the challenge here:

• Challenge URL: QR Code component

You'll also find the intended look of the site in Desktop and Mobile and the stylings provided by Frontend Mentor.

Screenshots

Links

• Live site URL: Live site

My process

I added two containers in order to center the QR code box (QR box was within the main-container div) using flexbox and a flex-direction column within the QR container.

To ensure the box fits exactly with the QR, img and QR container width were equal while height was auto. Padding was used to add the border, however, the border property can also be used.

QR image and text elements (grouped within div) were within a flex column which included a row gap value of 20 pixels.

Text elements included the values 0 (top) 10px (left and right) 20px (bottom) for its padding.

Built with

• HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Instead of trying to match width and height, it was better to use auto sizing and increase the padding in order to add an equal border.

Author

• Website - John Patrick Salen
• Frontend Mentor - @standwall5

Credits

• Frontend Mentor Site - Official site
• Challenge URL: QR Code component