Submitted over 1 year ago
QR code component challenge on Frontend Mento
@azeezqad
Design comparison
SolutionDesign
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
HTML
- You'd better update the
<main>
structure in the html to prevent the deterioration
<main> <img src="./images/image-qr-code.png" alt="QR code image"> <h1> Improve your front-end skills by building projects </h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main>
CSS
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
min-height: 100vh
to the body
body{ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
- When you use flexbox in the body, you don't need to use flexbox and
margin
in themain
to center the card - If you use max-width, the card will be responsive and you can reduce the width a bit
main{ /* width: 350px; */ max-width: 300px; /* margin: 200px auto 20px auto; */ }
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add
width: 100%
to the img
img{ border-radius: 8px; width: 100%; }
- You'd better update texts in this way
h1{ /* font-size: 28px; */ font-size: 20px; font-weight: bold; color: var(--dark-blue); }
p{ /* font-size: 20px; */ font-size: 16px; color: var(--grayish-blue); }
- Finally, if you follow the steps above, the solution will be responsive.
Hope I am helpful. :)
Marked as helpful0 - You'd better update the
Please log in to post a comment
Log in with GitHubJoin 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