Design comparison
Solution retrospective
Ability to use the flex display.
What challenges did you encounter, and how did you overcome them?Difficult to inspect the typography and box shadows in the figma design reference. I have done some research and tried a lot of things to inspect and copy the typography.
What specific areas of your project would you like help with?How to make the max-width and max-width of the cards properly to work for large screens
Community feedback
- @Islandstone89Posted 7 months ago
HTML:
-
Remove
.container
, it is not needed. -
The alt text must also say where it leads(frontendmentor.io).
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
Add the following to
body
:
justify-content: center; align-items: center; min-height: 100svh;
-
Remove the styles on
main
, they are not needed. -
Remove the margin on the card.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
line-height
andletter-spacing
must also never be inpx
. -
Since all of the text should be centered, you only need to set
text-align: center
on the body, and remove it elsewhere. The children will inherit the value. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
On the image, add
display: block
and changewidth
tomax-width: 100%
- the max-width prevents it from overflowing its container. -
You don't need to declare
font-style: normal
, as that is the default.
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