Mobile Responsive Stats Preview Card Component

Great work on this challenge!

As for the issues that arise when you start changing the viewport size, when you decrease the height of the viewport until the content no longer fits entirely on the screen, you run into a problem where the top part of the card gets cut off and becomes inaccessible to the user.

To fix this issue, you could simply change the height property to min-height:

body {
  width: 100%; ❌
  height: 100vh; ❌
  min-height: 100vh;
}

You'll notice that I also removed width: 100% from the body element as this is unnecessary.

This is because the width of the body element defaults to the full width of the screen if you don't specify a width.

I also noticed that the site doesn't switch to the mobile version of the site early enough.

When you reduce the viewport's width to the point where the width of the card is greater than the width of the viewport, part of the card gets cut off on the left side.

This is happening because of the hard-coded widths on the .container, .box1, and .box2 elements:

.container {
  width: 1110px;
}

.box1 {
  width: 570px;
}

.box2 {
  width: 540px;
}

These hard-coded widths cause the card to not be responsive to changes in viewport width as they're stuck at their given values even when the screen size is too small to fit all the content.

One way you could fix this is to switch to an intermediary layout that kicks in at 1150px.

In this layout, you could position .box2 above .box1, while keeping the layout of .box1 the same as its layout in the desktop version.

Essentially the only difference between the desktop layout and the intermediary one would be that the boxes are stacked on top of each other instead of positioned beside each other.

I chose 1150px because this is the last point at which the site still looks good on the desktop layout, beyond this point, either the whitespace is too small or the card no longer fits on the screen.

@media screen and (max-width: 1150px) {
  .container {
    flex-direction: column-reverse;
  }

  .box2 {
    width: 540px; ❌
  }
}

Finally, I would recommend that you switch to the mobile layout a bit earlier. Maybe around the 620px mark or higher.

This is to improve responsiveness as the card itself isn't very responsive, which is fine as long as you have media queries to deal with different screen sizes.

Other than that, this is a very good solution!

Hope this has been helpful! :)