stats-preview-card-component

Solution retrospective
Hello Guys, This is my second challenge. I have been coding for about 3 months. At the beginning of this challenge I struggled with the layout. Then I found some info about CSS flex and decided to give it a go. It did the job I guess, although I didn't manage to complete the last part of the challenge as smoothly as I wanted. I mean the "stats" bit: I created two flex divs, as I understand two of them are necessary because numbers and text are to be styled in a different way. So I thought it'd be easier like this. The problem came when I had to align the margins (left margins) for both numbers and text. To get this done I had to manually change margins (h2's and h3's), and I wonder if there's a quicker and more efficient technique to align these numbers and text elements.
On the other hand I also struggled a bit with the fonts: for instance I had to reduce or increase the pixel size of some fonts to make the design closer to the solution. I don't know if this is OK, or I should have used different elements to display de text. In the style guide it says that the font size should be 15px, but if I applied that size, some text would be bolder than the solution, or bigger, or smaller... I would really appreciate any advice on this.
Finally, I didn't even try to get the responsive mobile version done. I checked the W3 Schools article https://www.w3schools.com/css/css3_flexbox_responsive.asp but it seems a bit complicated. I guess there's no easy way or shortcut to make the challenge responsive is it? Do you recommend any tutorial for beginners regarding this?
Thank you very much in advance for your feedback friends!
Luis
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Luis's solution.
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