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!
@dev-aex
Posted
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 helpful
@dgrow9
Posted
@AEXdes Ok cool, that's what I thought. Thanks!!
@danielmrz-dev
Posted
Hello @dgrow9!
Your project looks great!
I have one suggestion for you to improve it even more:
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!
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
