Responsive Result Summary Page using HTML and CSS

Community feedback

• 

  Callie•170

  @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 helpful

  1
• 

  ohuttar•160

  @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 helpful

  1

  ---

  

  Mariah Wear•20

  @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
• 

  Islam abozeed•240

  @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