Skip to content
Submitted 3 months ago

Results summary component | mobile first and simple Grid usage

dkaffes•160
@dkaffes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • The HTML code uses semantic elements and its structure is getting better.
  • The CSS code is better organized and easier to read compared to previous challenges.
What challenges did you encounter, and how did you overcome them?
  • The implementation of Andy Bell's CSS Reset introduced some issues with margins. I had to remove margins (margin-inline for body and margin-block-start for various elements) using extra classes.
  • I had issues standardizing the behavior of the circular container containing the text: "76 out of 100". A trial and error procedure resulted in the usage of the following code (mobile):
.result-score-container {
  width: 50%;
  height: auto;
  margin: auto;
  border-radius: 50%;
  padding: 1rem;
}

However, in small mobile widths (eg 300px) the circle becomes egg-shaped. For the desktop version the code changed as follows:

  .result-score-container {
    width: 80%;
    padding: 2rem;
  }
What specific areas of your project would you like help with?
  • Is the way I implemented the circular container containing the text: "76 out of 100" correct?
  • Is there a better solution to make it more robust and responsive?
  • Any help will be truly appreciated!

Community feedback

  • Jay Khatri•4,250
    @khatri2002Posted 3 months ago

    The solution is coming together nicely! However, I noticed a few issues with the approach for creating a circle around the score text. Let me explain:

    Drawbacks of the Current Approach:

    • Using width: 50% and height: auto for mobile does not guarantee a perfect circle. The auto height causes the shape to rely on the content size, which often distorts the circle.

    • On desktop, the width: 80% and padding values can make the circle irregular, as padding adds extra space that affects the overall dimensions.

    Correct Approach:

    To ensure a perfect circle, the height and width should always be equal, and border-radius: 50% should be applied. Here's the correct CSS:

    .result-score-container {
  width: 100px; /* Fixed width */
  height: 100px; /* Fixed height */
  border-radius: 50%; /* Makes it a perfect circle */

  /* To center the score text */
  display: flex;
  align-items: center;  
  justify-content: center;

  /* To center the circle */
  margin: auto; 
}
    Marked as helpful
    0
    dkaffes•160
    @dkaffesPosted 3 months ago

    @khatri2002 thank you for your really useful tips and for the time you' ve spent!

    I appreciate it!

    0

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