Design comparison
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
Community feedback
- @DanK1368Posted over 2 years ago
As stated above already, you need to make use of the flex-box properties such as justify-content, and align-items in combination with display: flex. By doing so, there's no need to to give all your different headings margins. I suggest you watch this recent video from Traversy Media on flexbox, you'll be more comfortable on using it afterwards. Flexbox video
0@lnaranjocPosted over 2 years ago@DanK1368 Thanks for your feedback! The link at the end of your comment is just for a youtube search, not for a video. Can you please tell me which video you recommend? Traversy Media 's got more than 1 related to the topic. Thank you :)
0@DanK1368Posted over 2 years ago@lnaranjoc Oops :) Flexbox video. This is his latest one.
After doing some exercises with flexbox, and you feel more comfortable using it you can then go on to learn CSS Grid. Another way to position items on your page. Grid Video
0 - @Akhlak-Hossain-JimPosted over 2 years ago
First of all, try using the snippets: *, *::after, *::before { padding: 0; margin:0; box-sizing: border-box; } This will eliminate the unwanted behavior of any element. And I would say the style guide is not so helpful about font sizing. So that's not a problem.
And about the responsiveness, Try not to use absolute position to center an element. Instead of, position: absolute; top: 50%; left: 50%; transform translate(-50%, -50%); Try using, align-items: center; justify-content: center; And the body should be Min-height: 100vh; And you have to use @media queries for the responsiveness. And there is no other way.
0@lnaranjocPosted over 2 years agoHello Akhlak, I didn't kow about snippets. I have read a bit know, and got a question. If I include in a stylesheet:
- (this is an asterisk) { padding: 0; margin: 0; box-sizing: border-box; }
Will that apply to the whole code of a proyect?
Another question is: what did you mean by "*::after, *::before" ?
Thank you very much in advance.
0@Akhlak-Hossain-JimPosted over 2 years ago@lnaranjoc
*, *::after, *::before { padding: 0; margin:0; box-sizing: border-box; }This code actually removes all padding and margin provided by the browser.
Marked as helpful0
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