Design comparison
Community feedback
- @Islandstone89Posted 4 months ago
HTML:
-
I would remove
.container
, as it is not needed. -
The alt text should be written naturally, without using
-
between the words. 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." -
Headings should always be in order, so you never start with a
<h3>
. Change it into a<h2>
. As the card heading would likely not be the main heading on a page, I would change it to a<h2>
.
CSS:
-
Including a CSS Reset at the top is good practice.
-
I like to add
1rem
ofpadding
on thebody
, to ensure 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. -
Remove all widths.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. -
As the design doesn't change, there is no need for any media queries. When you do need them, they should be in
rem
orem
, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.
Marked as helpful1 -
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