@dvdgd
Posted
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 helpful
@gideonakpan
Posted
@dvdgd thank you