The most difficult for me was the positioning because I am still learning how to use it. Also, the code is a bit disorganized. I would like to know how to group the classes in a better way to apply the attributes.
@Bader-Idris
Posted
You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:
.container {
display: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful
Marked as helpful
@saranguiz92
Posted
Thank you very much for your feedback! @Bader-Idris
@talissoncosta
Posted
Hey @saranguiz92, congrats for your solution.
I've got some tips to you..
Try to apply css to each class individually... even if you are duplicating some props it is gonna be better because it is gonna be explicit to you and later on you can figure out how to handle it.. now you are grouping too much and many of styles are being overwritten.
As you are already using flexbox you can use gap here instead of a <br>
Anyway, that is a great start, soon you are getting used to flexbox and you will see how helpful it is.
I hope it helps... Happy coding
Marked as helpful
@saranguiz92
Posted
Thank you very much for your feedback! @talissoncosta
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
