The most difficult part was center a div.
And i think i use best practice in css but no in html.
@nmnjnklc
Posted
Hello @AldoRdz2001,
I think the easiest way to center a div (or any element) is to set the following properties to its parent element. For this particular situation:
body { height: 100vh; display: flex; align-items: center; justify-content: center; }
Hope this helps.
Stay safe and happy coding!
Marked as helpful
@AldoRdz2001
Posted
@nmnjnklc Thank you for your comment, i save this for the next project
@MelvinAguilar
Posted
Hi @AldoRdz2001 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉
I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:
To improve your HTML:
<body>
<main class="container">
. . .
</main>
<footer>
. . .
</footer>
<body>
<h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)<h1 class="contenedor__contenido--bold">Improve your front-end skills by building projects</h1>
Here are some other suggestions:
Using flexbox layout:
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Using grid layout:
body {
width: 100%;
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
}
Additionally, remove the margin to center the "contenedor" correctly.
Links with more information:
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
@AldoRdz2001
Posted
@MelvinAguilar Thank you for all the tips, i added the remomendations, thank you a lot
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
