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.
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.
- Live site URL: Live site
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.
- HTML5 markup
- CSS custom properties
- Flexbox
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.
- Website - John Patrick Salen
- Frontend Mentor - @standwall5
- Frontend Mentor Site - Official site
- Challenge URL: QR Code component