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

Sparks 50

@csparks78

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


Its a little awkward in mobile view. I welcome any tips!

Community feedback

Erik Aakre 230

@eaakre

Posted

When inspecting your site when its on a mobile setting, I found the extra space to be on the ".wrapper". On the desktop, it is set to "width: 580px;"

One of the things that worked for me when looking at the mobile version through the "Inspect" tools was to change your @media settings for the wrapper.

From this:

.wrapper{ box-shadow: none; margin: 0; }

To this:

.wrapper{ box-shadow: none; width: auto; margin: 0; }

I don't know if that fixes everything, but it doesn't have the scroll left or right for me anymore.

Marked as helpful

0

Sparks 50

@csparks78

Posted

@eaakre Yes, thank you! Itook your recommendations and also changed the widths to 100% and it looks much better!

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