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

Results Summary Component Challenge

Destany 50

@destanyr

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 am still struggling to understand how to do responsive design for mobile, any advice would be wonderful.

I also can only get my css grid and flexbox to work half the time so it took a while for me to complete this with lots of extra steps to make up for what wasn't working.

Community feedback

vinu cyril 980

@vinuman

Posted

Hello,

Good job completing the project. The desktop design looks impeccable.

  • If you are looking to make the component responsive, the Media queries in CSS allow you to create responsive designs that adapt to different screen sizes and devices. Please view "https://www.youtube.com/watch?v=2KL-z9A56SQ&t=62s" for a quick start.

  • Using meaningful class names can greatly improve the readability, maintainability, and scalability of your CSS code. By giving classes descriptive names that accurately reflect their purpose and meaning,

  • Setting a fixed width for the body element can cause several issues, including making the website less responsive and causing horizontal scrollbars to appear on smaller devices. Additionally, it can limit the flexibility of the design and make it harder to adapt to different screen sizes and resolutions. It is a good idea to use relative units like percentages or ems when defining widths in CSS. This allows elements to scale proportionally with their container and ensures that they can adapt to different screen sizes.

  • Kindly use the hover property for the button, which allows you to create interactive and engaging user experiences by adding visual feedback when users interact with buttons on your website. When a user hovers over a button, it can change color, size, or shape, giving them an indication that they are hovering over a clickable element.

  • Hope this helps. Happy coding!

Marked as helpful

0

Destany 50

@destanyr

Posted

@vinuman

Thank you, so much for offering such a detailed response. I found all of the advice very helpful. I'll work on implementing these changes and practicing the media queries.

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