@Islandstone89
Posted
Hi, good job on the challenge. Here are my suggestions to improve it even further.
HTML:
-
.box-text
should be a<footer>
. -
Footer text needs to be wrapped in a
<p>
.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML then using@import
. -
It's good practice to include a CSS Reset at the top.
-
on the
body
,height
should bemin-height
. -
I would move the
margin: 2rem
from thebody
to the.container
. The card might need some margin, so it doesn't touch the edge of the screen on smaller sizes. I think 1rem might be enough, though. -
Remove
overflow: hidden
. -
Since all text is centered, you can put
text-align: center
on thebody
, and remove it elsewhere. This way, you're taking advantage of inheritance, and you get the same result with one less line of code. -
Media queries should be in rem, not px. You don't need a media query here, though - the card should look the same on all devices.
-
Add a
max-width
on the card, (in rem also), to prevent it from getting too big on larger screens. Around 20rem should work fine.
Hope this helps :)
Marked as helpful