Design comparison
Solution retrospective
This is my first submission of a project on this platform and I would welcome feedback!
I found it difficult to adjust the size and placement of the circle element and would appreciate input or suggestions on how to do it more smoothly.
I feel like I needed to create too many classes to properly get all the text sizes and colors and formatting done properly, so again would love feedback on ways to slim down my code.
Thank you!!
Community feedback
- @Callietron300Posted over 1 year ago
Hey! I can see some people have already left comments,
For helping you center things I would recommend using flex a bit more, have a look at my solution as I used flex to center a lot of my element, you might find it useful.
When it comes to classes I used to be the same too, but ill be honest it looks like you've done a great job. Theres this method called BEM I learnt about it when I was following this course teaching me SASS and the two go hand in hand quite well. Id really recommend the course if you have a good grip on basic CSS and are looking to clean up your work and learn some best practices.
For sizing i'd also look in REM, this video taught me some great stuff about units and I find rem really useful in setting the right size.
I hope this is helpful- pls upvote my comment if it was (i get points lol)
Marked as helpful1 - @ohuttarPosted over 1 year ago
Hello Mariah!
I think I can give you a quick guide on how to deal with centering your content in an easier way. It's best to think from the top down. On your parent element, ".result-content", you can apply the following: "display: grid; justify-items: center;". This will center all of the direct children on the Y axis. That will allow you to remove your margin on the ".circle" and change your max-width to be just width.
Take it one step at a time, starting from the outside (i.e. how many direct children of my body? how do I want them to be organized?) and then move your way down. You generally shouldn't need to be making micro-adjustments for the overall layout.
Anyways, I think that you did a great job. Your solution looks very close to the original and it has the correct layout at both screen sizes.
I hope my comment helps!
Marked as helpful1@mariahw4Posted over 1 year ago@ohuttar thank you!!! I was really struggling with how to center the children - it seemed like everything I tried was getting crossed out as something I couldn't do when I inspected the site in the browser so I resorted to more brute force micro-adjustments!!
1 - @islamabozeedPosted over 1 year ago
Nicely done Mariah, as a first project, hope you do better next projects will wait for this, the only commit is that the body not centered in page there're many ways to center the div in page ex: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; } also you can search for more which is proper for your design
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