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

Stats Preview using CSS Grid

@Suraj1333

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Had bit of trouble with the responsiveness of the mobile design. Any suggestions would be helpful.

Community feedback

Sarah 835

@sarahc-dev

Posted

Hi

I would suggest not using a set vh or vw on your main and your text. I have a small macbook air screen and it cuts off most of your text because you've used a fixed height and it doesn't all fit on my narrow screen size. Use padding on the body instead to add the border area around the main, and allow the main content to grow as needed to suit each screen. You can use min-height, but not setting a fixed height on things should really help you with responsiveness.

Hope that helps :)

2

@Suraj1333

Posted

@sazzledazzle Thanks for the feedback!

0

@iamwhitegod

Posted

Hello, Suraj1333

To achieve responsiveness, try using percentage values for widths & heights instead VH & VW to avoid running into issues that comes with it.

0

@Suraj1333

Posted

@whitegod001 Thanks for the feedback

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