Design comparison
Solution retrospective
any recommendation or sugerency is welcome :)
Community feedback
- @pikapikamartPosted over 3 years ago
Hey, great job on this one. The layout on desktop is good and the mobile state as well.
A couple of suggestions would be that:
- If you try to inspect your layout in dev tools at the bottom, your content is being pushed on the top or center of the screen. This was caused by the
height: 100vh
on yourmain
tag. Setting this will make your element only have a 100% based on the height of the screen which is not good, since if a user have a lower or higher screen size based on height, they will get different layout. Instead, usemin-height: 100vh
and omitheight: 100vh
, also thewidth: 100vw
, this width declaration causes horizontal bar at the bottom.
1.1. Then just add a padding to the top and bottom of the
main
tag as well. To prevent touching flooring and ceiling.-
On the mobile view, it will also be better to set
min-height: 100vh
to thecontenedor
selector, instead ofheight: 100vh
. Also upon looking at other declaration on properties, you used%
a lot on the elements, which I think is not really necessary and this makes it harder to maintain a layout. Keeping them fixed like usingrem
will be really good. -
Also on the mobile state, you used
br
on the elements right, I think you forgot to set them in todisplay: none
. Right now it breaks the sentence into new row.
Just those mentioned, but still, really good job^
1@LeonRiveraPosted over 3 years ago@pikamart thank you so much for the feedback, i will do my best to apply the above :)
0 - If you try to inspect your layout in dev tools at the bottom, your content is being pushed on the top or center of the screen. This was caused by the
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