Design comparison
Solution retrospective
I had a hard time centering the QR Code Card while making sure the attributions were at the bottom left corner of the screen with Flexbox. I was wondering what is an easier/better way to do this? Thanks!
Community feedback
- @sanchezmiltonPosted over 2 years ago
I like it! I didn't take into account doing HTML semantic markup, I'll fix it later.
Regarding the position of the footer, if you added the
display: flex
tag to the body you can add thealign-self: flex-start
rule to the footer, that should be enough. I hope it helps!Marked as helpful1 - @MacChristoPosted over 2 years ago
Try and wrap your main contents inside a <main> tag. Since there are only two object on the body, the container and the attribution, you can have something like this:
body:{ display: flex; flex-direction: column; align-items: center; *This will center the objects after using flex* justify-content: space-between; *Add these to the body* overflow: hidden; height: 100vh; }
Remove all styles from your attribution
<footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by Mabs. </div> </footer>
Your attribution should be in footer tag. And no need to wrap the attribution element in a paragraph tag. All styles they need should be applied to the .attribution class. The follow-come styles for the attribution are even enough. just need to reduce the font-size. Hope this helps.
Marked as helpful1 - @mubizzyPosted over 2 years ago
Excellent job on this challenge! your report has a few issues though:
- wrap everything in your body in
<main>
or use semantics
2. it is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region.
Hope it helps:)...don't forget to mark it as helpful 👍
You can get more details here...click here
Marked as helpful1 - wrap everything in your body in
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