Design comparison
Solution retrospective
Hi everyone,
While completing this challenge, the main problem I faced is that for the mobile version, I didn't get the margin around the card (when I usually manage to get this margin). I couldn't figure out why... If anyone can help me with this it would be great!
Thank you as always 😃
Community feedback
- @karolbanatPosted almost 2 years ago
Hi @keziarkts, about your question, the problem probably is that you set fixed width on the
.main-card
element (width: 700px;
). That causes overflow on smaller screens. It is better to not set fixed widths on most of the elements, but if you want to limit the size, you could usemax-width
. So, here replacewidth: 700px
withmax-width: 700px
.Also in most cases (or probably always) its better to not set fixed
height
on elements and let content determine used space. So here, also, instead ofheight: 540px
usemin-height: 540px
or just remove that property from.main-card
.Hope it helps. Other than that, your solution looks great. ✨ Congratulations and happy coding. 😊
Marked as helpful0@keziarktsPosted almost 2 years agoHi @karolbanat! Thanks a lot for your suggestion and your great comments 😊
I quickly made the changes and also added a margin for the mobile part (to really match the original design):
body { margin: 60px 20px; }
. I don't know if this was really necessary...🤔 But in the end, I think it looks better for the overall code and its result. And thanks, I learned something new today :)1
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