Skip to content
Submitted 19 days ago

cards made using css grid, used flexbox to align items, used media que

Siddharth-esc•20
@Siddharth-esc
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

i'm glad that that i have completed this project in a short span of time. one of the things that i will do differently next time is breaking stuff into smaller parts and checking how each item works as per the responsiveness which will save a lot of my time.

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

there were not any major problems in this challenge, although i faced one will positioning the footer which was malfunctioning.

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

how to prevent malfunctioning in media queries and also while adding new elements in html.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,430
    @thisisharsh7

    Great job completing the challenge!

    Strengths:

    • Clean Design: The gradient backgrounds and card styling are well-executed, matching the design.
    • Clear Structure: The HTML is organized, with distinct sections for the result and summary cards.

    Some suggestions:

    • Media Query Malfunction: The footer (attribution) positioning issues stem from multiple media queries overriding bottom. Consolidate into one media query (e.g., @media (max-width: 640px)) and adjust bottom dynamically (e.g., bottom: calc(-300px - 10vw)) to avoid overlap across screen sizes.
    • Adding New Elements: When adding elements, ensure they respect the existing flex/grid layouts. Test new elements in both desktop and mobile views to avoid breaking responsiveness. Use box-sizing: border-box consistently to prevent padding/margin issues.
    • Accessibility: Add alt text to images (e.g., alt="Reaction icon") for screen readers.
    • CSS Optimization: Use CSS custom properties for colors (e.g., --red: #ff5757) to simplify maintenance.
    • Footer Fix: Move .attribution outside .card-container to avoid layout conflicts.

    Breaking tasks into smaller parts, as you plan, will help! Solid work overall.

    Marked as helpful
  • fisherstack•120
    @fisherstack

    Nice job :) That's interesting : I didn't though of that way of managing the white background (for the second card, with a negative margin) : i treated the white background as the main background (less minus values for lazy persons like me ^^).

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