@MelvinAguilar
Posted
Hi @Glorit74 👋, 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:
- Centering the element with position would make your element behave strangely on some mobile devices. There are two modern CSS techniques to center elements instead of using the position property.
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;
}
Additionally, remove the position properties:
main {
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
. . .
}
Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
.
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful