Responsive Stats preview card component using Flexbox
Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Husam, congratulations on your solution!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.To get closer to
overlay effect
on the photo as the Figma Design its better you usemix-blend-mode
. All you need is thediv
under theimage
with thisbackground-color: hsl(277, 64%, 61%);
and applymix-blend-mode: multiply
andopacity: 80%
on theimg
orpicture
selector to activate the overlay blending the image with the color of the div. See the code bellow:img { mix-blend-mode: multiply; opacity: 80%; }
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
2.1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using
GRID
. All you need to do is to usedisplay: grid
to activate the Grid and then make the two columns withgrid-template-column: 1fr 1fr
and its done, now you’ve two columns. For theMOBILE VERSION
you can switch toflex
creating a media query usingdisplay: flex
andflex-direction: column-reverse
to make the image appear before the text content.2.To make the image have a better fit inside of it, make the component image responsive with
display: block
andmax-width: 100%
(this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling useobject-fit: cover
.img { display: block; object-fit: cover; max-width: 100%; } 3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: [**https://piccalil.li/blog/a-modern-css-reset/**](https://piccalil.li/blog/a-modern-css-reset/) **✌️ I hope this helps you and 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