Design comparison
Solution retrospective
This is my first ever solution to a frontend mentor challenge, i had problems with creating the media queries for the challenge, i'm not even sure if the media query code i wrote is right according to the challenge, Please i'll appreciate a response on that and any other addition i should have made concerning my code.
Community feedback
- @talisong-cardosoPosted over 2 years ago
change:
<meta name="overview" content="width=device-width" initial="" scale="1.0">
to
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and, you can centralize the ".box" with flexbox, exemplo:
body { background-color: lightblue; display: flex; align-items: center; justify-content: center; height: 100vh;
the width property in 'body' is not needed, as this small element is centered and will not 'exit' the viewport.
sorry if there are any english mistakes. I'm from Brazil
Marked as helpful1@labisigloriaPosted over 2 years ago@talisong-cardoso Thank you, I appreciate this.
0 - @Des2DevPosted over 2 years ago
Hi ! you did good, but there are some small changes you can do to make it more good.
-
you don't need media query
@media
in this challenge. Remove the media query. -
And also use flexbox to center the card, and remove the margin properties from body.
-
And always try to use
min-height
property, notheight
.
I thin this comment will helpful. and Good luck to your upcoming challenges.
Marked as helpful0 -
- @correlucasPosted about 2 years ago
Hello Olabisi, congratulations for your solution!
I've checked your code and I find an issue, when your card is scaling down, there's a big margin around the component that doesn't let it scale properly.
See the fixes below:
.box { background-color: hsl(0, 0%, 100%); width: 280px; /* height: 440px; */ /* margin: auto; */ border-radius: 15px; }
Hope it helps, happy coding!
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