Html - Unaligned card text

RandomDudeOnStackOverflow
July 14, 2023
208 views
2 votes
4 Answers

So, I have a couple of cards I’ve created. My issue with the cards is that when one title of a card content is longer than the other cards, I want to know if it’s possible for text description of the other cards to adapt / move to the same level as the card with the longer title text.

I know my explanation doesn’t make sense, but check out the images and code, you’ll understand much better.

<body>
    <div class="card-container">
      <div class="card">
        <div class="card-content">
          <div class="card-content__img">
            <img src="p1 (2).jpg" alt="" />
          </div>
          <h3 class="card-header">
            Adventure Tours Adventure ToursAdventure ToursAdventure Adventure
            Tours Adventure ToursAdventure ToursAdventure
          </h3>
          <p class="card-description">
            Experience the thrill of a lifetime with our adventure tours. From
            hiking through breathtaking mountain ranges to conquering raging
            whitewater rapids, our expert guides will take you on unforgettable
            journeys filled with excitement and discovery.
          </p>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <div class="card-content__img">
            <img src="p1 (2).jpg" alt="" />
          </div>

          <h3 class="card-header">Wilderness Retreats</h3>
          <p class="card-description">
            Escape the hustle and bustle of everyday life and immerse yourself
            in the tranquility of nature with our wilderness retreats. Unplug
            from technology, reconnect with yourself, and find serenity in the
            beauty of pristine landscapes and peaceful surroundings
          </p>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <div class="card-content__img">
            <img src="p1 (2).jpg" alt="" />
          </div>

          <h3 class="card-header">Nature Photography Workshops</h3>
          <p class="card-description">
            Capture the stunning beauty of the natural world with our nature
            photography workshops. Learn from professional photographers, hone
            your skills, and explore picturesque locations as you develop a
            deeper connection with nature and create breathtaking images to
            cherish forever.
          </p>
        </div>
      </div>
    </div>
  </body>

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
}

Screenshot

Answers

With the way you have ordered the HTML (which I agree with as it groups the cards together perfectly), I don’t think it’s possible…

Instead you could iterate through the card-header elements to find which is the tallest and then set the min-height style on each element.

Of course this comes with the side-effect of being not very good on narrow screens, so you may wish to only execute this if the screen is a Table/Desktop device. And also have CSS media breakpoints for making the Cards fill up the screen width on narrow devices.

const headers = document.getElementsByClassName("card-header");

let tallestHeader = null

Array.from(headers).forEach((elem) => {
  // console.log(elem);
  tallestHeader = Math.max(tallestHeader, elem.offsetHeight);
});

// console.log(tallestHeader);

Array.from(headers).forEach((elem) => {
  elem.style.minHeight = `${tallestHeader}px`;
});

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
}

<body>
  <div class="card-container">
    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>
        <h3 class="card-header">
          Adventure Tours Adventure ToursAdventure ToursAdventure Adventure Tours Adventure ToursAdventure ToursAdventure
        </h3>
        <p class="card-description">
          Experience the thrill of a lifetime with our adventure tours. From hiking through breathtaking mountain ranges to conquering raging whitewater rapids, our expert guides will take you on unforgettable journeys filled with excitement and discovery.
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>

        <h3 class="card-header">Wilderness Retreats</h3>
        <p class="card-description">
          Escape the hustle and bustle of everyday life and immerse yourself in the tranquility of nature with our wilderness retreats. Unplug from technology, reconnect with yourself, and find serenity in the beauty of pristine landscapes and peaceful surroundings
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>

        <h3 class="card-header">Nature Photography Workshops</h3>
        <p class="card-description">
          Capture the stunning beauty of the natural world with our nature photography workshops. Learn from professional photographers, hone your skills, and explore picturesque locations as you develop a deeper connection with nature and create breathtaking images
          to cherish forever.
        </p>
      </div>
    </div>
  </div>
</body>

You need to use JavaScript to check all card-header element heights and then adjust the height of all card-header elements to the highest one.

See the snippet below.

const cardHeaders = document.querySelectorAll('.card-header');
let maxHeight = 0;

cardHeaders.forEach(cardHeader => {
  const height = cardHeader.offsetHeight;
  maxHeight = Math.max(maxHeight, height);
});

cardHeaders.forEach(cardHeader => {
  cardHeader.style.height = `${maxHeight}px`;
});

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1 0 calc(33.33% - 5rem);
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}

<body>
  <div class="card-container">
    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="https://www.balisafarimarinepark.com/wp-content/uploads/2022/06/IMG_8164-1-scaled-1200x900-cropped.jpg" alt="" />
        </div>
        <h3 class="card-header">
          Adventure Tours Adventure ToursAdventure ToursAdventure Adventure Tours Adventure ToursAdventure ToursAdventure
        </h3>
        <p class="card-description">
          Experience the thrill of a lifetime with our adventure tours. From hiking through breathtaking mountain ranges to conquering raging whitewater rapids, our expert guides will take you on unforgettable journeys filled with excitement and discovery.
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="https://www.balisafarimarinepark.com/wp-content/uploads/2022/06/IMG_8164-1-scaled-1200x900-cropped.jpg" alt="" />
        </div>

        <h3 class="card-header">Wilderness Retreats</h3>
        <p class="card-description">
          Escape the hustle and bustle of everyday life and immerse yourself in the tranquility of nature with our wilderness retreats. Unplug from technology, reconnect with yourself, and find serenity in the beauty of pristine landscapes and peaceful surroundings
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="https://www.balisafarimarinepark.com/wp-content/uploads/2022/06/IMG_8164-1-scaled-1200x900-cropped.jpg" alt="" />
        </div>

        <h3 class="card-header">Nature Photography Workshops</h3>
        <p class="card-description">
          Capture the stunning beauty of the natural world with our nature photography workshops. Learn from professional photographers, hone your skills, and explore picturesque locations as you develop a deeper connection with nature and create breathtaking images
          to cherish forever.
        </p>
      </div>
    </div>
  </div>
</body>

- Seritas
- July 14, 2023 at 11:23 am
- 0 votes
0
I am not sure to understand your question.
You want to set the height of the card-header class dynamically to the height of the greatest card-header element?

You can do it with flex-grow.

Here is the CSS:
```
.card-content
{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  flex-grow: 1;
}
```
As u can see, the card-content class is now also a flex-box with 100% of height, and the card-header get the flex-grow.

Hope this will help.
Login or Signup to reply.

I hope this fixes your issue. (Note that I made some changes to your DOM and styles. Please observe.)

.card-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    flex: 2;
}

.name {
    font-size: 2rem;
}

.card img {
    width: 100%;
}

.card-content {
    display: flex;
    flex-direction: column;
    width: calc((100% / 3) - 2rem);
}

.card-content__img {
    display: flex;
    flex: 1;
}

    <!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="styles.css" />
            <title>Document</title>
        </head>
        <body>
            <div class="card-container">
                <div class="card-content">
                    <div class="card-content__img">
                        <img src="https://picsum.photos/200/300" alt="" />
                    </div>
                    <h3 class="card-header">
                        Adventure Tours Adventure ToursAdventure ToursAdventure Adventure
                        Tours Adventure ToursAdventure ToursAdventure
                    </h3>
                    <p class="card-description">
                        Experience the thrill of a lifetime with our adventure tours. From
                        hiking through breathtaking mountain ranges to conquering raging
                        whitewater rapids, our expert guides will take you on unforgettable
                        journeys filled with excitement and discovery.
                    </p>
                </div>

                <div class="card-content">
                    <div class="card-content__img">
                        <img src="https://picsum.photos/200/300" alt="" />
                    </div>

                    <h3 class="card-header">Wilderness Retreats</h3>
                    <p class="card-description">
                        Escape the hustle and bustle of everyday life and immerse yourself in
                        the tranquility of nature with our wilderness retreats. Unplug from
                        technology, reconnect with yourself, and find serenity in the beauty
                        of pristine landscapes and peaceful surroundings
                    </p>
                </div>

                <div class="card-content">
                    <div class="card-content__img">
                        <img src="https://picsum.photos/200/300" alt="" />
                    </div>

                    <h3 class="card-header">Nature Photography Workshops</h3>
                    <p class="card-description">
                        Capture the stunning beauty of the natural world with our nature
                        photography workshops. Learn from professional photographers, hone
                        your skills, and explore picturesque locations as you develop a deeper
                        connection with nature and create breathtaking images to cherish
                        forever.
                    </p>
                </div>
            </div>
        </body>
        <script src="script.js"></script>
    </html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Unaligned card text

Answers