Design comparison
Solution retrospective
I am proud that I solved the small gap issue between the photo container and the text container caused by the div line break. The solution was to set the font-size of the image to 0, which prevented errors from appearing on the bottom left and right corners when applying border-radius to the image.
What challenges did you encounter, and how did you overcome them?The difficulty lies in not being sure about the appropriate size for the cards—whether to allocate them based on screen size or set a fixed width. As a result, in the first design, I ended up creating a very peculiar RWD (responsive web design) setup. After reviewing my peers' examples, I realized that using max-width to set the maximum width is sufficient, without needing to use media queries to differentiate font sizes across different screen sizes.
Community feedback
- @Islandstone89Posted 2 months ago
HTML:
-
The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
-
.attribution
should be a<footer>
, and you should use<p>
for the text inside.
CSS:
-
Including a CSS Reset at the top is good practice.
-
I would recommend adding
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
I usually set
font-family
on thebody
instead of:root
. -
I would move the properties on
main
tobody
, this way you can center both the main and the footer. Addflex-direction: column
andgap: 2rem
and changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. Also, removewidth: 100%
- a block element likebody
takes up the full width by default. -
It's recommended to use
px
instead of%
forborder-radius
. -
Well done for giving the card a suitable
max-width
, so it doesn't stretch indefinitely. However, it's best practice to use rem, so change it tomax-width: 20rem
. -
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. -
letter-spacing
must also never be inpx
. You can useem
, where1em
equals the element's font size. -
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. NB:text-align: center
doesn't apply to images. -
On the image, add
display: block
and changewidth
tomax-width: 100%
- the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container.max-width: 100%
makes the image shrink to fit inside its container.
Marked as helpful1 -
- @ezeaniiandrewPosted 2 months ago
Hi, congratulations on completing this challenge. You did a terrific job on it. A little tip that could make it better—especially on mobile screens—is adding a little bit of padding on the body element to prevent the card from looking cramped.
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