Design comparison
Solution retrospective
How do i makes sure the coded by stays at the bottom?
Community feedback
- @luigi-peronePosted about 2 years ago
Hi @stepheigbe,
You've a great solution here but there is a tag you can consider changing in the html, the h2 should be wrapped with an h1.These changes don't change the design but improve the accessibility and semantic.
Hope it helps, happy coding π
0 - @correlucasPosted about 2 years ago
πΎHello @stepheigbe, congratulations for your new solution!
Answering your question:
The property that makes the content stay in different rows is
flex-direction: column;
apply that and you'll see the differencemain { display: flex; align-items: center; justify-content: center; flex-direction: column; }
πΈ Use this mini game to learn
FLEXBOX
and all its properties by positioning the frog and become aFLEXBOX MASTER
here's the link: https://flexboxfroggy.com/π I hope this helps you and happy coding!
0 - @ErayBarslanPosted about 2 years ago
Hey there, great work on your solution! To place attribution on bottom and not effect the rest of your layout you can use:
.attribution { font-size: 11px; position: absolute; bottom: 0; }
Absolute positions the element relative to it's parent without effecting any other element. Since parent of attribution is the main, you'd want to move it out of main and make it's parent body. To keep it semantic, you can use
<footer>
on attribution instead of div. Hope this answers your questions, happy coding :)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