Design comparison
Community feedback
- @HassiaiPosted almost 2 years ago
Replace<div class="container">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
The body has a wrong background-color. To center .qr-container on the page using flexbox, replace the height with min-height:100vh.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1 - @domieeePosted almost 2 years ago
๐๐ปโโ๏ธHi manta-lucian,
I noticed only a few small things:
-
Instead of using
div
element, you should rather use a nesting withmain
>section
. This is important for web accessibility. Take a look here -
Instead of the fixed width of 300px, use
max-width: 300px;
+width: 100%
. The img will keep thewidth: 100%;
. This way everything remains responsive.
P.S. Change the background-color property of your body ๐
Edit: Also take a look at the
h2
and change it toh1
.h1
has to be the first heading in your code. Here's how you handle headingsHaven't found anything else yet, maybe someone else will find something
Otherwise great project and keep coding!โ(แตแตแต)โ
Marked as helpful1 -
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