Responsive Results Summary Component using HTML and CSS

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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @rohitd99
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 itmax-width : none
on mobile sizes for it to be responsive. Thatmax-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 asmain
,section
,article
etc instead ofdiv
. You may read on them here.Good luck for other challenges.
Marked as helpful
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