Skip to content
Submitted over 1 year ago

Responsive Results Summary Component using HTML and CSS

Dale Torres•50
@daletorres
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

I found it difficult to fix the padding/margin of the results and summary components and since this is my first responsive project, I built the desktop-view first and then later tried to build the mobile-view as I did not know about the mobile-first workflow yet.

As for code that I am unsure of, I believe there are some elements or CSS that I added that might not be needed or is redundant which is something I hope to improve on as I build more projects here in frontendmentor.io.

Community feedback

  • Rohit Deshpande•870
    @rohitd99Posted over 1 year ago

    Hi Dale

    Congrats on your first submission 🥳.

    First of all I noticed that you have applied media queries for making it responsive but you made a small mistake since you set the max-width property on results div for desktop size, you need to make it max-width : none on mobile sizes for it to be responsive. That max-width property was not letting the results div cover the whole width. Other than that I would also recommend you to use semantic elements such as main, section, article etc instead of div. You may read on them here.

    Good luck for other challenges.

    Marked as helpful
    0
    Dale Torres•50
    @daletorresPosted over 1 year ago

    Really appreciate the input Rohit! I knew I was doing something wrong with the media queries lol, I'm going to check all of the things you pointed out and do the challenge again. @rohitd99

    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