Design comparison
Community feedback
- @HamzaouladevPosted over 1 year ago
hello @LisandraFerraz! heres some layout tips that you may find interesting:
-always use the appropriate tags for text like the paragraph tag and the header tags, also try to use divs as little as possible and try to replace them with the html5 semantic tags, heres a cool article about their importance.
-instead of giving the main component a fixed width in multiple break points, a simple but effective hack would be to give it a relative width:
width: 90%;
and a fixed max width:max-width: 700px;
these two lines will result in smooth transitions between break points-usually its not a good idea to give your component a fixed height, because it wont be able to adjust to large amounts of content and you may run into overflowing issues, in this case i suggest you add extra padding at the top and bottom instead
-also you dont need the block level margin in your main component since its a flex child.
-a really cool trick you can use to manage spacing is called The lobotomized owl selector, i really recommend you check it out
I hope you found my feedback useful, happy hacking!
Marked as helpful1
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