0

I'm trying to build a list of team members on a site. And there's (always) this guy who has a really long job title that is pushing his job description downloads.

This caused a misalignment with the other job descriptions and the designer is very OCD about this.

The only solution I found so far is to limit the job description to 3 lines with:

font-size: 10px;
height: 30px;
line-height: 1;

However, it is still not error proof if a job title becomes 4 lines long. Plus, smaller screens may even wrap short texts to become longer than 4 lines.

I researched the possibility using css grid, but found no solution to this problem. These conditions need to be met:

  • Image, Name&Title and Description needs to be aligned on the same line
  • Each of the four grid needs to have the same height
  • Flexible text
  • If we can solve this without using jQuery's MatchHeight it will be great.

enter image description here

<div class="row small-up-1 medium-up-2 large-up-3">
  <% loop $Collection %>
    <div class="column person">
      <div class="row column">
        <div class="person__photo">
          <img src="$Image.Url" class="person__photo--round" alt="$Name">
        </div>
      </div>
      <div class="row column text-center">
        <h4 class="person__name">$Name</h4>
        <h5 class="person__role">$Role</h5>
      </div>
      <% if $Blurb %>
        <div class="row column person__summary content">$Blurb</div>
      <% end_if %>
    </div>
  <% end_loop %>
</div>
James Wee
  • 21
  • 1
  • 2
  • 1
    You should post enough code to reproduce the problem. That enables us to help you more effectively. – Michael Benjamin Oct 20 '17 at 01:32
  • Hi @Michael_B, added the code for your reference. – James Wee Oct 26 '17 at 01:39
  • @JamesWee [this post](https://stackoverflow.com/a/46890585/703717) should help :) – Danield Oct 30 '17 at 15:13
  • 1
    @Danield Thank you so much. That is exactly what I am looking for. It's just unfortunate there isn't a clear cut (and fool proof) way that's supported by all browsers. But all good, I got what I need. Thank you again. – James Wee Oct 31 '17 at 22:06

1 Answers1

0

Can you put them in rows? So do something like:

.headshot, .positionTitle, .description {
 width: 100px;
 min-height: 20px;
 border: solid 1px black;
}

.row {
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
}
<div class="row"> <!-- Image row -->
 <div class="headshot"></div>
 <div class="headshot"></div>
 <div class="headshot"></div>
 <div class="headshot"></div>
</div>

<div class="row"> <!-- Title row -->
 <div class="positionTitle">Short</div>
 <div class="positionTitle">Short</div>
 <div class="positionTitle">Really really<br><br><br>long</div>
 <div class="positionTitle">Short</div>
</div>

<div class="row"> <!-- Description row -->
 <div class="description"></div>
 <div class="description"></div>
 <div class="description"></div>
 <div class="description"></div>
</div>
andrewf
  • 375
  • 4
  • 10
  • Good idea but if I am looping all the team members from a loop, I can't do this unless I have multiple loop for each category (headshot, position, description) which is an anti-pattern. – James Wee Oct 24 '17 at 02:55