Design comparison
Solution retrospective
Hi guys! This is my solution to the challenge "Social proof section master" in HTML and CSS. I would really like to know what de you think about it! It is very important for me. This is just the first version of the solution, I will probably change it and complete it.
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. Just a few pointers
- You used way too many media queries. One or two should be enough
- The content is not in the middle of the page
body { background-color: var(--clr-Light-Grayish-Magenta); font-size: 15px; font-family: var(--ff-League-Spartan); min-height: 100vh; /* add flexbox on the body, to place the content in the middle of the page */ display: flex; justify-content: center; align-items: center; /* margin: 5rem 0; */ /* remove this line */ }
0@younesadjoudjPosted over 1 year ago@hitmorecode Thank you very mush. I have one question please: In my css I used a lot of position (relative), do you think it's a good practice ?
0@hitmorecodePosted over 1 year ago@younesadjoudj this is a no right or wrong answer, you manage to do it so it's ok. But I will say this avoid using position if it's not necessary. Try to lean more towards flexbox or css grid. For example the three cards you could aligned them horizontally with flexbox and then with position to move it downwards.
I mean you made it and it looks good with just position, but if you want to make it responsive it will be a lot of work. With flexbox or css grid you can do it much easier.
If you are not familiar with flexbox or css grid check these tutorials on youtube
Marked as helpful0
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