Design comparison
Solution retrospective
Tried my best, next i will try to be more organized
What challenges did you encounter, and how did you overcome them?Setting up the width and height with relative measurements
What specific areas of your project would you like help with?Css
Community feedback
- @Islandstone89Posted 12 months ago
Hi, you have done a lot of correct things here, well done. Here are a few tips to improve it even more.
HTML:
-
Strictly speaking, you don't need any of the divs.
-
The alt text also needs to say where it leads (frontendmentor.io).
-
"Scan the QR code" is not a
<h2>
but a<p>
. -
.attribution
should be a<footer>
. -
Footer text needs to be wrapped in a
<p>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
font-size
is by default1rem
, so there is no need to declare it on*
. -
Personally I would put
font-family
on thebody
. -
Add some
padding
on the card to create the space between the image and the edge of the card. -
Remove the
height
on the card. -
On the image, remove
padding-top
, and thewidth
andheight
. Adddisplay: block
andmax-width: 100%
- the max-width prevents it from overflowing the card.
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