Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hi @Sidd5arth, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
1.Use
<main>
instead of a simple<div>
this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a<main>
block and that<div>
doesn't have any semantic meaning.2.The main heading has the tag
<h2>
, in this case, you should replace it with<h1>
since this heading is the main title on this page. Remember that every page should have one<h1>
to declare which is the most important title and that you should follow the hierarchy using the heading sequence(h1, h2, h3, h4, h5)
and never jump a level.3.Fix the alignment. The best way make this alignment is by using
FLEXBOX
. The first step, is to addmin-height: 100vh
to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since thebody
will display ever 100% of the screen height. After that add two flex properties to make the alignmentdisplay: flex
/align-items: center;
/justify-content: center;
. If you're using the attribution you need to addflex-direction: column
to make the attribution stays under the QR Code component. See the code below:body { min-height: 100vh; font-family: 'Outfit', sans-serif; background-color: rgba(214, 226, 240); display: flex; align-items: center; justify-content: center; }
✌️ I hope this helps you and happy 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