Submitted almost 2 years ago

Responsive Stats Page With CSS Flexbox

@MonetCode88

A solution to the Stats preview card component challenge

Solution retrospective

Edit: The screenshot on the solution tab looks different than my solution not sure what that's about but I would love feedback.

I found it challenging to align the bottom row of text properly and it took a lot of trial and error to get it to look proper. I would love to know some better techniques than the one I used to make this work properly as I am unsure if that was the proper way.

What is the best practice in regard to scaling text?

Code

Please log in to post a comment

Community feedback

Aditya Yadav•710

@mraditya1999

Posted almost 2 years ago

For enhanced responsiveness and simplified background image integration, consider removing the fixed width and height properties from the container. Instead, utilize a single div to enclose the image, and apply flex properties to the "card-info" and "card-img" elements with a value of "flex: 1". This approach allows the card to adapt fluidly to different screen sizes while maintaining its proportion and providing a more professional user experience.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Card with Responsive Image</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <div class="card">
      <div class="card-img">
        <!-- Place your image here -->
        <img src="your-image.jpg" alt="Card Image">
      </div>
      <div class="card-info">
        <!-- Card content -->
      </div>
    </div>
  </main>
</body>
</html>

CSS (styles.css):

body {
  margin: 0;
  padding: 0;
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* Additional main container styles can be added if needed */
}

.card {
  display: flex;
  /* Add more card styles as per design requirements */
}

.card-img {
  flex: 1;
  /* Additional styles for the image container can be included here */
}

.card-info {
  flex: 1;
  /* Additional styles for the card information container can be added here */
}

With this implementation, the card will naturally adjust its size and proportion based on the content and the screen's dimensions, providing an improved user experience on various devices. The background image is replaced by a more structured approach using a separate div for the image and employing flex properties to make the card content more responsive and visually appealing.

Marked as helpful

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