Abdellah el aajjouri• 190
@abdellahelaajjouri
Posted
Your card looks good , just decrease the height using max height and aligne it the content , Keep up 👌
Marked as helpful
1
Mohammad Ebrahimi• 250
@moheb2000
Posted
@abdellahelaajjouri Thanks🌸🌸🌸
1
Design comparison
Solution retrospective
1- I used object-fit: cover for image> Is there any better approach? 2- To colorizing image I used a violet box with low opacity. Is there a better way for this problem?
Community feedback
Abdo Achhoubi• 330
@abdoachhoubi
Posted
The card is perfect 👌 but consider placing it in the center, try changing the height of the body to "100vh", and then change it's display to flex, and make the justify-content: center / and align-items: center. Take a look at my solution to learn more. https://www.frontendmentor.io/solutions/responsive-stats-preview-card-made-using-html5-and-css3--zCH01OJG
Marked as helpful
1
Mohammad Ebrahimi• 250
@moheb2000
Posted
@abdoachhoubi Really thanks. About centering element with flexbox, if height of screen become smaller, content in the box doesn't show completely. I don't know how to fix this issue but until finding a solution, I don't center my elements in the page. ❤️❤️❤️
0
PhoenixDev22• 16,950
@PhoenixDev22
Posted
Hello @moheb2000,
I have some suggestions regarding your solution :
-
To improve the image overlay effect you should look up blend modes. You don't need an extra div you can have the one div
class="column cover", background color Usemix-blend modeand opacity to make it more like the design. -
To center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vhfor the<body>like this:
body{
display:flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
-
For
class="stats", it would be better if you use an unordered list<ul>with 3 items for the stats -
The number and word have to be read together to make sense so need to be in the same meaningful element. so only a
spanor maybestrongtag needs to wrap the numbers. the words likecompaniesshould not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item)
Overall , your solution is good, Hopefully this feedback helps.
Marked as helpful
0
Mohammad Ebrahimi• 250
@moheb2000
Posted
@PhoenixDev22 Thanks a lot 🌺🌺🌺 I will use your advices
1
Please log in to post a comment
Log in with GitHub
Join 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