Design comparison
Solution retrospective
I had fun with this project. I did find the overlay a little challenging...and a learning experience. Please offer any related feedback for improvement.
Community feedback
- @VCaramesPosted over 2 years ago
Congrats on completing this challenge!
To perfectly center your content, add the following to your Body Element;
min-height: 100vh
,display: flex
,justify-content: center
, align-items: center, and
flex-direction: column`.Regarding what was mentioned in the previous comment, just change your Card Class
width
tomax-width
. In the same class, remove themargin
; not needed.Marked as helpful1@skscjoynerPosted over 2 years ago@vcarames Thank you so much for your suggestions! It looks and responds better now. I couldn't figure out the responsiveness part, but you made it clear.
0 - @Cooly-o-CatsPosted over 2 years ago
This is great! It seems that the card doesn't shrink on mobile. Anything under 375px. It would be great if you solved this, probably easiest using media queries.
1@skscjoynerPosted over 2 years ago@Cooly-o-Cats Thanks! I got it figured out. I had to change the width property.
0
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