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
• Author

Overview

Screenshot

Links

• Solution URL: Solution
• Live Site URL: QR Code Component

My process

Built with

• HTML
• CSS
• Flexbox
• Google Fonts
• Media Queries
• Responsively App

What I learned

Although I was able to center the main card horizontally, it was a little tricky to get it centered vertically, even though I was using the appropriate Flexbox properties. Finally, I was able to get it centered vertically using the following CSS:

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Continued development

Although I was able to use media queries successfully to achieve what I needed to for this project, I want to focus on improving the way I use media queries in future projects.

Author

• Website - Adolf Schmuck
• Frontend Mentor - @answebdev
• GitHub - @answebdev