How do I get these columns to be of the same height?

Question

Top image is where the media query starts and the bottom image is where the resolution is enlarged. As the resolution is wider, the image will expand to its container. Is there any way I can make it full expanded (same height as card content on the left) when the media query starts?

CSS:

@media (min-width:700px) {

    .card {
        grid-template-columns: 1fr 1fr;
    }

    .card-image {
        order: 2;
    }

    .card-content {
        order: 1;
        text-align: left;
    }

    .flex-group {
        flex-direction: row;
    }
}

score -1 · Answer 1 · answered Apr 02 '23 at 07:11

Look at the following code snippet for this problem, i am sure you'll be able to modify your code :)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 16px;
  font-family: "Inter";
}
.container {
  background-color: hsl(244, 38%, 16%);
  width: 300px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 10px;
}
/*IMAGE SECTION STYLES*/
.img-section {
  border-radius: inherit;
  position: relative;
}
.img--overlay {
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  height: 98.5%;
  background-color: hsla(277, 70%, 60%, 0.401);
  top: 0;
}
img {
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  height: 100%;
}

/*STATISTICS BOX-STYLES*/
.stat-box {
  text-align: center;
  padding: 0 32px 0;
}
.stat-box-title {
  color: hsl(0, 0%, 100%);
  font-family: "Inter";
  font-size: 24px;
  margin-bottom: 16px;
}
h2 span {
  color: hsl(277, 64%, 61%);
}
.stat-box-desc {
  color: hsla(0, 0%, 100%, 0.75);
  font-family: "Lexend Deca";
  font-weight: 400;
  margin-bottom: 48px;
  line-height: 1.5;
}
.stat-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stat-member:last-child {
  margin-bottom: 32px;
}
.stat-number {
  color: hsl(0, 0%, 100%);
  font-family: "Inter";
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.stat-name {
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 12px;
  font-family: "Lexend Deca";
}

/*MEDIA QUERY FOR DESKTOP*/
@media (min-width: 830px) {
  .container {
    margin: 200px auto;
    width: 800px;
    flex-direction: row-reverse;
    gap: 0;
  }
  .stat-box {
    flex: 0 1 400px;
    padding: 42px 48px 0;
    text-align: left;
  }
  .img-section {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex: 0 1 400px;
  }
  img {
    border-radius: inherit;
    width: 100%;
  }
  .img--overlay {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
  }
  .stat-container {
    flex-direction: row;
    gap: 24px;
  }
  .stat-box-desc {
    font-size: 12px;
  }
  .stat-number {
    font-size: 15px;
  }
  .stat-name {
    font-size: 10px;
  }
  .stat-member:last-child {
    margin-bottom: 0;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap"
      rel="stylesheet"
    />
    <title>Frontend Mentor | Stats preview card component</title>
  </head>
  <body>
    <div class="container">
      <div class="img-section">
        <img src="https://github.com/si88har1h/stats-preview-card-component/blob/main/images/image-header-desktop.jpg?raw=true" alt="" />
        <div class="img--overlay"></div>
      </div>
      <div class="stat-box">
        <h2 class="stat-box-title">
          Get <span>insights</span> that help your business grow.
        </h2>
        <p class="stat-box-desc">
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall effeciency.
        </p>
        <div class="stat-container">
          <div class="stat-member">
            <p class="stat-number">10k+</p>
            <p class="stat-name">COMPANIES</p>
          </div>
          <div class="stat-member">
            <p class="stat-number">314</p>
            <p class="stat-name">TEMPLATES</p>
          </div>
          <div class="stat-member">
            <p class="stat-number">12M+</p>
            <p class="stat-name">QUERIES</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

From your code, I applied to flex property short-hand and it worked. Is it good practice to define the width of the container when the media query hits and then define the flex property shorthand for the flex items? — shahiedul, Apr 02 '23 at 10:36

How do I get these columns to be of the same height?

1 Answers1