Design comparison
SolutionDesign
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
HTML
In order to fix the accessibility issue:
- Your
<img>
tag should includealt =""
attribute. You can apply like this:
<img src="https://i.postimg.cc/g0FTXFQy/image-qr-code.png" alt="qr-code"/>
CSS
- If you want to center it correctly, you can update the
body
in this way:
body { background-color: hsl(212, 45%, 89%); font-size: 1vw; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Hope I am helpful. :)
Marked as helpful0 - Your
- @georgebleyerPosted over 1 year ago
Hello,
Congratulations on completing this challenge. Here are some tips on how to align your card. your card its not inthe middle of the page. For that you need to put in your .body this part
min-height: 100vh;
and remove the:
padding-top: 5%;
I hope it helped.
0
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