Design comparison
Solution retrospective
I know flexbox probably would have been easier, but I wanted to see if I could solve this using only the box model. So it might be a little messy/excessive. Also had some issues with centering again, and now that I'm looking at it I'm worried it might not actually be centered.
Still a little confused about ids vs classes. If I'm only using the div container once, that should be an id, right?
If anyone wants to offer any help/advice/constructive criticism I would appreciate it!
Community feedback
- @dev-aexPosted 9 months ago
Great work!
Regarding the div container question, in this case, you should use an ID. IDs are used to select only one HTML element at a time. Therefore, you can't use the same ID name for two different elements. On the other hand, classes are used to apply the same style to multiple HTML elements.
Marked as helpful1 - @danielmrz-devPosted 9 months ago
Hello @dgrow9!
Your project looks great!
I have one suggestion for you to improve it even more:
- Although you've done a very good job using
position
to center the card, it is not the best option to do it.Position
can cause bugs and may result in part of the content being cut off on smaller screens.
Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; /* it works with grid too */ justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
0 - Although you've done a very good job using
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