htmlcssfoundation

How to get a card to match the height of the card next to it

I'm having issues with getting my cards to have the same height of the card next to it for different screen sizes. Currently, I'm using a min-height but that would require many media queries to get it to work on all screens. How can I achieve this with the use of media queries? The text inside the boxes will probably change length from time to time, so having to adjust the media queries each time really isn't an option.

I've tried using flex-grow: 1 and was unsuccessful with that. I also tried 100% height, which just took over the whole page.

Thank you in advanced.

.vertical-overlap-card {
  margin-bottom: 20px;
  padding: 1rem 0 1rem 0;
}

.vertical-overlap-card img {
  width: 280px;
  height: 280px;
  margin: auto;
  margin-bottom: -6rem;
  position: relative;
  z-index: 1;
}

.vertical-overlap-card img {
  display: block;
}

.vertical-overlap-card-body {
  padding-top: 6rem;
}

.vertical-overlap-card-body {
  background-color: #fff;
  display: flex;
  padding-left: 50px;
  padding-right: 50px;
  min-height: 25rem;
}

.title {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.5rem;
  color: #575047;
  border: 0px;
  background-color: transparent;
  text-transform: none;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

@media only screen and (max-width: 380px) {
  .vertical-overlap-card img {
    width: 250px;
    height: 250px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

@media only screen and (max-width: 335px) {
  .vertical-overlap-card img {
    width: 200px;
    height: 200px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

.section.--shaded {
  background-color: #efefef;
}

.section {
  padding: 2rem 0;
  position: relative;
}

.container {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.vertical-overlap-card {
  margin-bottom: 20px;
  padding: 1rem 0 1rem 0;
}

.vertical-overlap-card img {
  width: 280px;
  height: 280px;
  margin: auto;
  margin-bottom: -6rem;
  position: relative;
  z-index: 1;
}

.vertical-overlap-card img {
  display: block;
}

.vertical-overlap-card-body {
  padding-top: 6rem;
}

.vertical-overlap-card-body {
  background-color: #fff;
  display: flex;
  padding-left: 50px;
  padding-right: 50px;
  min-height: 25rem;
}

.title {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.5rem;
  color: #575047;
  border: 0px;
  background-color: transparent;
  text-transform: none;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

@media only screen and (max-width: 380px) {
  .vertical-overlap-card img {
    width: 250px;
    height: 250px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

@media only screen and (max-width: 335px) {
  .vertical-overlap-card img {
    width: 200px;
    height: 200px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

.section.--shaded {
  background-color: #efefef;
}

.section {
  padding: 2rem 0;
  position: relative;
}

.container {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.grid {
  display: grid;
  width: 100%;
  max-width: 80rem;
  margin: 0rem auto;
  padding: 1rem;
  grid-template-rows: auto;
  list-style: none;
  grid-template-columns: repeat(12, 1fr);
}

@media only screen and (min-width: 0em) {
  .grid {
    gap: 1rem 1rem;
  }

  @supports not (gap: 0 0) {
    .grid {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--sm-collapse {
    gap: 0 0;
    padding: 0;
  }

  @supports not (gap: 0 0) {
    .grid.--sm-collapse {
      grid-gap: 0 0;
    }
  }

  .grid.--sm-uncollapse {
    gap: 1rem 1rem;
    padding: 1rem;
  }

  @supports not (gap: 0 0) {
    .grid.--sm-uncollapse {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--sm-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid__col.--sm-1-cols {
    grid-column-end: span 1;
  }

  .grid__col.--sm-col-start-1 {
    grid-column-start: 1;
  }

  .grid__col.--sm-col-stop-1 {
    grid-column-end: 2;
  }

  .grid__col.--sm-1-rows {
    grid-row-end: span 1;
  }

  .grid__col.--sm-row-start-1 {
    grid-row-start: 1;
  }

  .grid__col.--sm-row-stop-1 {
    grid-row-end: 2;
  }
}

@media only screen and (min-width: 40em) {
  .grid {
    gap: 1rem 1rem;
  }

  @supports not (gap: 0 0) {
    .grid {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--med-collapse {
    gap: 0 0;
    padding: 0;
  }

  @supports not (gap: 0 0) {
    .grid.--med-collapse {
      grid-gap: 0 0;
    }
  }

  .grid.--med-uncollapse {
    gap: 1rem 1rem;
    padding: 1rem;
  }

  @supports not (gap: 0 0) {
    .grid.--med-uncollapse {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--med-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid.--med-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid__col.--med-1-cols {
    grid-column-end: span 1;
  }

  .grid__col.--med-col-start-1 {
    grid-column-start: 1;
  }

  .grid__col.--med-col-stop-1 {
    grid-column-end: 2;
  }

  .grid__col.--med-2-cols {
    grid-column-end: span 2;
  }

  .grid__col.--med-col-start-2 {
    grid-column-start: 2;
  }

  .grid__col.--med-col-stop-2 {
    grid-column-end: 3;
  }

  .grid__col.--med-1-rows {
    grid-row-end: span 1;
  }

  .grid__col.--med-row-start-1 {
    grid-row-start: 1;
  }

  .grid__col.--med-row-stop-1 {
    grid-row-end: 2;
  }

  .grid__col.--med-2-rows {
    grid-row-end: span 2;
  }

  .grid__col.--med-row-start-2 {
    grid-row-start: 2;
  }

  .grid__col.--med-row-stop-2 {
    grid-row-end: 3;
  }
}

.grid__col {
  display: block;
  grid-row-end: span 1;
  grid-column-end: span 1;
  position: relative;
}

.grid__col > .--fit-to-col {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<section class="section --shaded">
  <div class="grid --sm-1 --med-2">
    <div class="grid__col">
      <div class="vertical-overlap-card --fit-to-col"><img alt="" src="https://clipground.com/images/square-clipart-image-9.png" />
        <div class="vertical-overlap-card-body">
          <div class="container">
            <h3>Title</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit suscipit animi autem voluptates doloremque ex unde laudantium minus recusandae sequi numquam similique, repellat vel aspernatur atque ad beatae quod dolor!</p>
          </div>
        </div>
      </div>
    </div>

    <div class="grid__col">
      <div class="vertical-overlap-card --fit-to-col"><img alt="" src="https://clipground.com/images/square-clipart-image-9.png" />
        <div class="vertical-overlap-card-body">
          <div class="container">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nostrum fuga beatae, laudantium, delectus quisquam quia mollitia earum fugit voluptates temporibus corrupti obcaecati est nihil non esse nam qui eos.</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nostrum fuga beatae, laudantium, delectus quisquam quia mollitia earum fugit voluptates temporibus corrupti obcaecati est nihil non esse nam qui eos.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse iste quidem a enim unde nisi? Id sequi vitae ab velit a, repudiandae assumenda hic doloremque ipsam animi totam quam ipsum tempore voluptas deserunt dolorum pariatur excepturi odit inventore impedit reiciendis quod! Sed possimus dicta, labore blanditiis tempore dolores quaerat fugit.</p>
  </div>
</section>
Solution

  • You'd want to use height: 100%, but you'd want to compensate for the height of the <img> element:

    .vertical-overlap-card-body {
  /* … */
  height: calc(100% - 280px + 6rem);
}

    Subtract 280px as per the height: 280px applied to the <img>. Add back 6rem as per the margin-bottom: -6rem applied to the <img>.

    .vertical-overlap-card {
  margin-bottom: 20px;
  padding: 1rem 0 1rem 0;
}

.vertical-overlap-card img {
  width: 280px;
  height: 280px;
  margin: auto;
  margin-bottom: -6rem;
  position: relative;
  z-index: 1;
}

.vertical-overlap-card img {
  display: block;
}

.vertical-overlap-card-body {
  padding-top: 6rem;
}

.vertical-overlap-card-body {
  background-color: #fff;
  display: flex;
  padding-left: 50px;
  padding-right: 50px;
  min-height: 25rem;
  height: calc(100% - 280px + 6rem);
}

.title {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.5rem;
  color: #575047;
  border: 0px;
  background-color: transparent;
  text-transform: none;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

@media only screen and (max-width: 380px) {
  .vertical-overlap-card img {
    width: 250px;
    height: 250px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

@media only screen and (max-width: 335px) {
  .vertical-overlap-card img {
    width: 200px;
    height: 200px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

.section.--shaded {
  background-color: #efefef;
}

.section {
  padding: 2rem 0;
  position: relative;
}

.container {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.vertical-overlap-card {
  margin-bottom: 20px;
  padding: 1rem 0 1rem 0;
}

.vertical-overlap-card img {
  width: 280px;
  height: 280px;
  margin: auto;
  margin-bottom: -6rem;
  position: relative;
  z-index: 1;
}

.vertical-overlap-card img {
  display: block;
}

.vertical-overlap-card-body {
  padding-top: 6rem;
}

.vertical-overlap-card-body {
  background-color: #fff;
  display: flex;
  padding-left: 50px;
  padding-right: 50px;
  min-height: 25rem;
}

.title {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.5rem;
  color: #575047;
  border: 0px;
  background-color: transparent;
  text-transform: none;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

@media only screen and (max-width: 380px) {
  .vertical-overlap-card img {
    width: 250px;
    height: 250px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

@media only screen and (max-width: 335px) {
  .vertical-overlap-card img {
    width: 200px;
    height: 200px;
    margin: auto;
    margin-bottom: -6rem;
    position: relative;
    z-index: 1;
  }
}

.section.--shaded {
  background-color: #efefef;
}

.section {
  padding: 2rem 0;
  position: relative;
}

.container {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.grid {
  display: grid;
  width: 100%;
  max-width: 80rem;
  margin: 0rem auto;
  padding: 1rem;
  grid-template-rows: auto;
  list-style: none;
  grid-template-columns: repeat(12, 1fr);
}

@media only screen and (min-width: 0em) {
  .grid {
    gap: 1rem 1rem;
  }

  @supports not (gap: 0 0) {
    .grid {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--sm-collapse {
    gap: 0 0;
    padding: 0;
  }

  @supports not (gap: 0 0) {
    .grid.--sm-collapse {
      grid-gap: 0 0;
    }
  }

  .grid.--sm-uncollapse {
    gap: 1rem 1rem;
    padding: 1rem;
  }

  @supports not (gap: 0 0) {
    .grid.--sm-uncollapse {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--sm-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid__col.--sm-1-cols {
    grid-column-end: span 1;
  }

  .grid__col.--sm-col-start-1 {
    grid-column-start: 1;
  }

  .grid__col.--sm-col-stop-1 {
    grid-column-end: 2;
  }

  .grid__col.--sm-1-rows {
    grid-row-end: span 1;
  }

  .grid__col.--sm-row-start-1 {
    grid-row-start: 1;
  }

  .grid__col.--sm-row-stop-1 {
    grid-row-end: 2;
  }
}

@media only screen and (min-width: 40em) {
  .grid {
    gap: 1rem 1rem;
  }

  @supports not (gap: 0 0) {
    .grid {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--med-collapse {
    gap: 0 0;
    padding: 0;
  }

  @supports not (gap: 0 0) {
    .grid.--med-collapse {
      grid-gap: 0 0;
    }
  }

  .grid.--med-uncollapse {
    gap: 1rem 1rem;
    padding: 1rem;
  }

  @supports not (gap: 0 0) {
    .grid.--med-uncollapse {
      grid-gap: 1rem 1rem;
    }
  }

  .grid.--med-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid.--med-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid__col.--med-1-cols {
    grid-column-end: span 1;
  }

  .grid__col.--med-col-start-1 {
    grid-column-start: 1;
  }

  .grid__col.--med-col-stop-1 {
    grid-column-end: 2;
  }

  .grid__col.--med-2-cols {
    grid-column-end: span 2;
  }

  .grid__col.--med-col-start-2 {
    grid-column-start: 2;
  }

  .grid__col.--med-col-stop-2 {
    grid-column-end: 3;
  }

  .grid__col.--med-1-rows {
    grid-row-end: span 1;
  }

  .grid__col.--med-row-start-1 {
    grid-row-start: 1;
  }

  .grid__col.--med-row-stop-1 {
    grid-row-end: 2;
  }

  .grid__col.--med-2-rows {
    grid-row-end: span 2;
  }

  .grid__col.--med-row-start-2 {
    grid-row-start: 2;
  }

  .grid__col.--med-row-stop-2 {
    grid-row-end: 3;
  }
}

.grid__col {
  display: block;
  grid-row-end: span 1;
  grid-column-end: span 1;
  position: relative;
}

.grid__col > .--fit-to-col {
  height: 100%;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<section class="section --shaded">
  <div class="grid --sm-1 --med-2">
    <div class="grid__col">
      <div class="vertical-overlap-card --fit-to-col"><img alt="" src="https://clipground.com/images/square-clipart-image-9.png" />
        <div class="vertical-overlap-card-body">
          <div class="container">
            <h3>Title</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit suscipit animi autem voluptates doloremque ex unde laudantium minus recusandae sequi numquam similique, repellat vel aspernatur atque ad beatae quod dolor!</p>
          </div>
        </div>
      </div>
    </div>

    <div class="grid__col">
      <div class="vertical-overlap-card --fit-to-col"><img alt="" src="https://clipground.com/images/square-clipart-image-9.png" />
        <div class="vertical-overlap-card-body">
          <div class="container">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nostrum fuga beatae, laudantium, delectus quisquam quia mollitia earum fugit voluptates temporibus corrupti obcaecati est nihil non esse nam qui eos.</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nostrum fuga beatae, laudantium, delectus quisquam quia mollitia earum fugit voluptates temporibus corrupti obcaecati est nihil non esse nam qui eos.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse iste quidem a enim unde nisi? Id sequi vitae ab velit a, repudiandae assumenda hic doloremque ipsam animi totam quam ipsum tempore voluptas deserunt dolorum pariatur excepturi odit inventore impedit reiciendis quod! Sed possimus dicta, labore blanditiis tempore dolores quaerat fugit.</p>
  </div>
</section>