Design comparison
Solution retrospective
Honestly it wasn't too difficult, although giving the purple color to the image was a bit of a headache, but I managed to do it. I'm not convinced about the size of the image when changing the screen size. Anyway, any suggestions are welcome.
Sinceramente no fue demasiado difícil, aunque darle el color purpura a la imagen fue un pequeño dolor de cabeza, pero logre hacerlo. No termina de convencerme el tamaño de la imagen al cambiar el tamaño de la pantalla. De todas formas cualquier sugerencia es bienvenida.
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Gastón Federico Nahuel Gómez! 👋
For the purple overlay, I recommend using
mix-blend-mode
property. For your reference, you can see @DarrickFauvel's solution for this challenge.Frontend Mentor | Stats preview card component - HTML / Sass / Grid coding challenge solution
The statistic numbers should not be
<h3>
. Also, the statistic should be a list of three bullet points.Never use
px
unit for font sizes. Userem
orem
instead. Relative units such asrem
andem
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSSYou should adjust the media query breakpoint. 375px breakpoint for the one-column layout is too late. Even on 700px width, the image is not filling the entire page and each statistic item starts having no space.
I hope this helps. Happy coding! 👍
Marked as helpful0
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