Stats Preview Card Component Using flexbox and media query for mobile.
Design comparison
Solution retrospective
When using flex, how do I set the height and width of each flex item to fit the container that wraps the flex? Thanks
Community feedback
- @grace-snowPosted over 3 years ago
Hi I'm not sure I understand your question. You use flex-basis to control the size of flex children (height if in a colum, width if in a row)
I think you need to use background blend mode on this with the image.
This looks broken for me on mobile atm because content doesn't fit on screen, but it's an easy fix. Just swap height for min-height 100vh on the body ☺
I also recommend you change your html a liitle. Semantically, think about what would be appropriate for those 3 statistics. If this was written without any styles in a normal document, how would you write those? You definitely wouldn't make numbers like "10k" into headings for other content. See if you can work out semantically meaningful and appropriate html element structure for that part of the card
Good luck
Marked as helpful1@duynguyen0613Posted over 3 years ago@grace-snow Thank you so much for your feedback. --The problem that I had during working on this assignment was when I set my container into display: flex. The flex items inside the container were broken. The idea of setting the height to min-height was great (thanks for this tip).
0
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