Design comparison
SolutionDesign
Solution retrospective
My second challenge! I'm not sure about some stuff
- Is the meta tag here is correct ? I didn't change it at all
- Text font for some reason doesn't work at github ?? it works locally though
- Maybe additional optimization? like I manually guess 20px from the outer white box to the outer image border. Is there something like automaticly do this ?
any feedback are welcome ! thanks anyway !
Community feedback
- @BlackpachamamePosted 10 months ago
- You should try placing the CSS in a separate file and then import it into the HTML
- The font does not work, because you are not importing it from anywhere, the README of the styles should give you a link to select the font from Google Fonts and the link to import it.
- I have seen that you have used
br
to apply the space above and below, it is the first time I see it and I was surprised, I did not expect it haha. Anyway, it's not the right way to do it. The correct thing to do would be to remove thosebr
, remove themargin
from yourpseudo
id and apply apadding: 20px
. This will apply that spacing around the entire card. - I recommend using
class
instead ofid
The rest looks really good, keep it up! 💪
Marked as helpful1@ChaosBlitz404Posted 10 months agoThx for the feedback. I appreciate it @Blackpachamame
1 - @danielmrz-devPosted 10 months ago
Hello @ChaosBlitz404!
Your solution looks great!
I have one suggestion:
- I noticed that you set
display: grid;
on the body to center the card, but there are 3 rows since you added the<br>
(break row) tags. This is pushing your card up.
You can fix that by adding this to the body:
grid-template-rows: 90% 1fr;
Or you can just remove the
<br>
tags. 😊I hope it helps!
Oyher than that, you did an excellent job!
0 - I noticed that you set
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