@Islandstone89
Posted
HTML:
- Nothing to be said here - well done!
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. -
Instead of
0px
, just write0
. -
You don't need to write
.container
before every selector. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
Remove all widths and heights. In general, you should (almost) never set fixed sizes.
-
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. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container.
Marked as helpful
@Zuja93
Posted
@Islandstone89 Thank You for the helpful comment and all these advices. I'll try to implement it in future.