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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

Links

• Solution URL: Source Code
• Live Site URL: Codepen

My process

Built with

• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I learned when it's more efficient to use px instead of rem. i hace some trouble withthe desktop sizing because I had the width set in rems.

I set the card width to 350px because it kept almost the same display as close to the mobile view as possible. I had to adjust the padding and text sizing a little to get it to look right, but other than that, it was fun to work on.

@media (min-width: 768px) {
    .card {
        width: 350px;
        padding: 0 1.2rem;
    }

    .card__details {
        padding: 2rem 1.5rem;
    }

    .card__description {
        font-size: 1.7rem;
    }
}

Continued development

I might tweak the card a little more to make use it's pixel perfect. I'm sure there are more ways in which I can improve this project.

Useful resources

• Bunny Fonts - This is my go to source for fonts. They have the same fonts as Google Fonts but they are GDPR compliant.

Author

• Frontend Mentor - @ritabradley
• Twitter - @ritabradley_dev