Submitted over 1 year ago

Responsive Stats Page With CSS Flexbox

Jimmy•60

@MonetCode88

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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?

Community feedback

Aditya Yadav•710

@mraditya1999Posted over 1 year 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

Jimmy•60

@MonetCode88Posted over 1 year ago

Oh I see, thank you for that!@Aditya-oss-creator

Please log in to post a comment

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