Design comparison
Solution retrospective
Write CSS code again after a long time.
What challenges did you encounter, and how did you overcome them?Trying to make my card responsive.
What specific areas of your project would you like help with?More challenges
Community feedback
- @dvdgdPosted 7 months ago
Hello there! Great job completing this challenge.
In all frontend mentor challenges, the starter folder will always include a file named
style-guide.md
, which contains information about typography, such as font weight, as well as the color palette used in the design.With that in mind, I have a few suggestions for improving the UI to closely match the design:
-
Update the body
background-color
to usehsl(212, 45%, 89%)
. -
Set the text color of the "Scan QR Code..." section to
hsl(220, 15%, 55%)
. -
The
h3
doesn't need a color; you can simply usefont-weight: 700;
. Here's the suggested typography:.card-box .content h3{ font-weight: 700; font-size: 22px; line-height: 28px; }
-
As long as you match the typography, it's also important to match the size of the card. For the maximum width, ensure the card doesn't exceed
320px
(including padding). Calculating:320px - 16px padding right - 16px padding left = 288px
of maximum width. And for the card to react to a small screen, prevent it to get the full width of the screen by adding amargin: 0 16px
.card-box { max-width: 288px; padding: 16px; padding-bottom: 40px; border-radius: 20px; margin: 0 16px; }
-
For the image, remove both width and height percentage values. Setting a maximum width of 100% will ensure the image adjusts to the size of the
.card-box
, which has a maximum width of288px
. The height property will be automatically calculated..card-box img { max-width: 100%; border-radius: 10px; }
-
The last thing that will be missing is the card box shadow:
.card-box { box-shadow: 0px 25px 25px rgba(0, 0, 0, 4.77%); }
You've done a great job centering the content using
margin: 80px auto
. To further improve it, consider using a dynamic value in the margin:margin: 15% auto
. But also try another approachs like using flex-box properties.Additionally, you've effectively utilized media queries and CSS variables to set the card width based on the screen. While these are valuable for responsiveness, given that we have dynamic values for our image, the content can naturally adjust in mobile devices without the need for additional media queries.
Marked as helpful0 -
- @florinbejguPosted 7 months ago
The solution diverges from the design in the fact that it is responsive and at certain sizes it looks strange (at 1020px width is wider than at 1030px). The heading colour is also different.
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