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 using HTML/CSS

Temsaah 450

@Temsaah

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


Does anyone know why the webpage preview isn't full screen? in my browser before submitting it was full screen and looked normal

Community feedback

Callie 170

@Callietron300

Posted

Hey! Apologies, but i was interested in your issue but realised I don't quite have all the knowledge to solve your problem. But I think I've managed to work out what the issue is and some potential solutions :)

In your container element you have a set height, however at a viewport width below 1000 your grid collapses into a column but it keeps the height: 400px which is what is causing the summary box to keep that same height and cutting your background short.

I have a feeling if you fix your grid declarations that could be the solution. Or it might have something to do with which elements you are setting height for. An easy fix would be to use a media query to set the height to auto in your container for viewport widths below 1000.

Sorry I cant give you a proper fix but i hope this helps you find a solution! I gave this a go a few weeks ago and was quite happy with it if you are interested. But i didn't use any grid! (pls upvote my comment if it helped you!)

0
ohuttar 160

@ohuttar

Posted

Hello!

In response to your question, you may need to add "min-height: 100vh" to your body.

Hope this helps!

0

Temsaah 450

@Temsaah

Posted

@ohuttar didn't work unfortunately, thanks for trying

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