Design comparison
Solution retrospective
any feedback is welcome :)
Community feedback
- Account deleted
Hello Indrajid, congrats on completing this modal component. Just a few css tips.
Style HTML elements using an
id
attribute it isn't considered best practise, insteadclass
attribute should be employed. Otherwise specificity will be difficult to handle as your project grows. Also while only one uniqueid
for each element is allowed a singleclass
can target multiple elements making your CSS more reusable and modulable.Also the
#main__body
element hasmargin: 100px 50px 50px 200px
, this centering approach could be remplaced by a more responsive one. Settingmin-height: 100vh
to the body, wich would allow the element to grow vertically equally as the screen and then applying . And rhen styling the#main__body
as follows:#main__body { display: flex; aling-items: center; justify-content: center; }
Try to check these docs about Flexbox just in case you're curious about how to center elements. Other than that your component looks nice and JS seems well organized, hope this is helpful and happy coding!
Marked as helpful0
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