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 card components

@karan819381

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


couldn't make it responsive. any way to learn

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @karan819381!

Your solution looks great, man!

Here's a quick guide on height for the body:

In CSS, height: 100vh and height: 100% represent different concepts and have different behaviors.

  • height: 100vh: This sets the height of an element to 100% of the viewport height. The viewport height is the full height of the user's browser window, regardless of the actual content height. Using 100vh ensures that the element takes up the entire height of the viewport.

This is often used for creating full-height sections or containers that cover the entire screen, for example, in a hero section or a landing page.

  • height: 100%: This sets the height of an element to 100% of the height of its containing element. It's a relative unit and depends on the height of the parent container.

In summary:

height: 100vh sets the height relative to the viewport height.

height: 100% sets the height relative to the height of the containing element.

Most projects here we use min-height: 100vh; because they normally ocuppy the window's full height.

I hope it helps!

Marked as helpful

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