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

moonrose93 370

@moonrose93

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 think its just fine?

Community feedback

@asbhogal

Posted

Another thing - you have some horizontal clipping in responsive view - between 481px and 716px. If you check this in your browser dev tools you should notice this. You may want to update/review the flex-direction in your @media query. This is probably the easiest, simplest way to resolve the issue. Also, there's some minor design differences with the button and text styling which are subsequently causing accessibility issues with the foreground/background contrasting. Run a Lighthouse check and you'll notice them on your end.

Hope this helps!

Marked as helpful

1

moonrose93 370

@moonrose93

Posted

@asbhogal thanks 😊

1

@GeorgeDaris

Posted

Looks great for the most part!

Your font has trouble getting loaded, so make sure to look into what is causing the error. I would suggest you change the break-point of your media query, as there is some overflow present at the 500px - 700px width range.

For the margin of your image left items, you could use a margin-right of auto on the p tag. This will move the item to the far right no matter the size of the container.

Hope this helps!

1

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