Design comparison
Solution retrospective
-what i found challenging was mostly the positioning of the elements, i kept using random widths, heights, margins and paddings until it looked right, i think it's not the right way to do it so any tips? -im not sure of the 76 part cuz the font weight seems smaller than the preview but when i changed it other elements moved around so idk how to fix tht -and i think the code isnt the best out there and could use some best practices
Community feedback
- @visualdennissPosted over 1 year ago
Hello there,
The final result looks pretty nice and seems to work overall! But there could be some improvements as you pointed out.
Firstly, i think it is better practice to have a common parent for the two sections you have, something like <div class='container> ...2 sections here...</div> and make the container display:flex. And then to position this whole box with sections. When you have these two sections like this, which supposed to be related but now separated, it becomes hard to control. Finally to center this whole container, you can do:
body { width: 100%; /* height: 100%; / box-sizing: border-box; display: flex; justify-content: center; / margin-top: 10%; / / margin-bottom: 10%; */ min-height: 100vh; align-items: center; }
basically instead of margin: 10%, which causes the box to move around uncontrolled, you can have the body equal to whole viewport so child (container) is always centered.
Hope this helps! }
Marked as helpful1
Please log in to post a comment
Log in with GitHub
Join 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