Design comparison
Solution retrospective
This was a good challenge to learn more about the use of CSS Grid and Flexbox to change webpage designs based on screen-size. Any suggestions to help improve the design would be greatly appreciated, Jack
Community feedback
- @Islandstone89Posted 9 months ago
HTML:
-
As the icons are purely decorative, the alt text should be empty:
alt=""
. -
There should only be one
<h1>
on a page. Given there are 3 similar headings, I would change all of them into a<h2>
.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML than using@import
. -
On
body
, addmin-height: 100svh
to make it (at least) as tall as the viewport. Also, add1rem
ofpadding
, so the card container doesn't touch the edges on small screens. -
Remove the width and height on
.preview-card
and.section
. -
Add a
max-width
in rem on the card container, so it doesn't stretch infinitely on big 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. -
Media queries must be in rem, and it is common to do mobile styling as the default.
Marked as helpful0@Jack-OCPosted 9 months ago@Islandstone89 Thank you for the clear suggestions, I will definitely fix these issues Thanks, Jack
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