Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Results Summary Component using HTML and CSS

@daletorres

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@rohitd99

Posted

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

@daletorres

Posted

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
Discord logo

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