Skip to content
Submitted 2 months ago

Results Summary Component Solution

Chrision Wynaar•200
@Clipzorama
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?

I am most proud of completing this solution. It was really fun and it is evident that I have work to do. Next time I'd like to get the layout on point .

What challenges did you encounter, and how did you overcome them?

I had some problems with gradient colors. I saw the colors that I was supposed to use for the solution and I remembered using linear-gradient() for the results div and I wasn't getting the color that I anticipated. I realized that there is a 4th parameter that depicts the opacity of the color. Knowing this helped me move forward.

What specific areas of your project would you like help with?

I would like help on the layout part of this project. They're not the same and I would like feedback to know what to do next time.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 2 months ago

    Hi, Chrision Wynaar,

    I reviewed your solution, and here are a few of my thoughts:

    • I noticed that in both this solution and your Blog Preview Card solution, the section with the class .all-content is the only child of the <body> element. To simplify, consider applying the .all-content class directly to the <body> and removing the <section> tag. This reduces unnecessary markup, making the structure cleaner.
    • The .all-content class currently has width: 100% and min-height: 100vh. However, width: 100% isn’t needed because <section> (and the <body>, if you apply the class there) is a block-level element, which automatically takes up the full width of its parent by default. It’s still true even if you move the class to the <body>. It’s better to apply min-height: 100vh to the <body> to ensure the content always covers the full viewport height, especially for pages with less content.
    • Your <body> doesn’t include any of the semantic tags like <header>, <main>, or <footer>. It’s good practice to use these tags for accessibility and semantic clarity. You could apply the .all-content class to the <body>, as I mentioned earlier, and change the .container to a <main> element instead of a <div>. Similarly, your .attribution section could be a <footer> instead of a <div>. These semantic tags help screen readers and search engines better understand the structure and purpose of each section.
    • You mentioned the layout doesn’t match the design, but you didn’t specify what’s off. I assume you’re referring to the width of the summary. You’ve set the .container width to 35%, meaning it will take up 35% of its parent’s width (in this case, .all-content, which spans the full viewport). The issue arises when the viewport is too small, causing the .container to shrink and the content to overlap or overflow. I noticed you have a media query for viewports 600px wide and below. Consider adding more media queries for larger viewports or setting a min-width on the .container to prevent it from shrinking too much.

    Hope this helps!

    Marked as helpful
    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