Search code examples
cssreactjsrowreact-bootstrap

React: Make all rows the same height

I've managed to make all columns in a row the same height, however, I don't know how to do it for rows (see the screenshots and code below). I would like that in a mobile view, when there is only one card in a row, all rows have the same height.

<div ref={ponudbaRef} className="trending-menu-section">
    <div className="container-fluid">
        <div className="row g-3 g-lg-4">
            <>
                {data?.map((item, i) => (
                    <div className="col-sm-6 col-lg-3 d-flex" key={i}>
                        <div className={`card-body offer-item text-center`}>
                            <div className="text-center">
                                <img src={item.slika} alt="" />
                            </div>
                            <h4 className="title">
                                <Link to="/productDetails" state={{ime: item.ime}}>{item.ime}</Link>
                            </h4>
                        </div>
                    </div>
                ))}
            </>
        </div>
    </div>
</div>

Here all the rows are different:

three rows

Here columns in the same row have the same height: two columns

Solution

  • Add the following CSS:

    @media only screen and (max-width: 576px) { // CSS will apply to mobile only
  .card-body {
    height: 200px; // Make all cards the same height
  }

  img {
    width: 100%; // Make the image full window width
    max-height: 150px; // But not higher than 150px
    object-fit: contain; // Preserve image aspect ratio
  }
}

    See the live demo.

    App.js

    import "./styles.css";
import img1 from "./salmon3.png";
import img2 from "./rib.png";

export default function App() {
  return (
    <div className="pb-120 desert-menu-section">
      <div className="container-fluid">
        <div className="row g-3 g-lg-4">
          {data?.map((item, i) => (
            <div
              className="col-sm-6 col-lg-3 d-flex align-items-stretch"
              key={i}
            >
              <div className="card-body offer-item text-center">
                <div className="text-center">
                  <img src={item.img} alt="" />
                </div>
                <h4 className="title">
                  <p to="/productDetails" state={{ ime: item.title }}>
                    {item.title}
                  </p>
                </h4>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const data = [
  {
    img: img1,
    title: "Juicy Beef Burger Meal"
  },
  {
    img: img2,
    title: "Choko Milkshake From Heaven"
  }
];

    styles.css

    .App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  position: relative;
  z-index: 1;
}

@include breakpoint(xl) {
  .container {
    max-width: 1260px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@include breakpoint(max-lg) {
  .container,
  .container-fluid {
    padding-inline: 30px;
  }
}

.pb-120 {
  padding-bottom: 120px;
  @include breakpoint(max-lg) {
    padding-bottom: 90px;
  }
}

@include breakpoint(max-md) {
  .desert-menu-section {
    padding-top: 40px;
  }

  .trending-menu-section {
    padding-top: 140px;
  }

  .layer-section {
    padding: 140px 0 130px;
    .btn-base {
      font-size: 18px;
      padding: 10px 45px;
    }
  }
}

/* Added */
@media only screen and (max-width: 576px) {
  .card-body {
    border: 1px solid red;
    height: 200px;
  }

  img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
  }
}