Responsive stats preview card with pure HTML and CSS
Design comparison
Solution retrospective
My solution for stats preview card challenge. All feedbacks are welcome. (especially regarding accessibility and responsive design)
Community feedback
- @AzkanorouziPosted about 2 years ago
hello Kaan 😀 your card's text collapses sometimes I guess you should set your card's height on auto so that it can grow depending on content inside of it , if that didn't work play around with padding between the texts a little bit, I hope it helps . nice job btw 👍
Marked as helpful1 - @correlucasPosted about 2 years ago
👾Hello Kaan Karameşe, congratulations for your new solution!
Here's some tips to improve your solution:
The container is too big, something that can have a better fit is
max-width: 1110px
main { max-width: 1110px; display: flex; position: absolute; flex: 1; top: 0; /* width: 100%; */ height: 100%; justify-content: center; align-items: center; }
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%; }
You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use
<picture>
instead of<img>
wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful1
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