Aligning divs using @media

Question

I have some boxes which are perfectly aligned in every way except they are different heights. I'd like the heights all the same. They align at the bottom, on the sides, with the edge of the page, but at the top they're all different heights. I'm happy with the layout, 3 x3 but how to get the heights all the same size.

Page: https://adsler.co.uk/find-an-event/

@media (min-width: 768px) {
  .box-layout {
    max-height: 100%;
  }
}

<div class="line-layout" style="display: none;">
  <li class="event_listing post-6985 
    type-event_listing status-expired 
    hentry" style="visibility: 
    visible;" data-latitude="" data- longitude="">
    <div class="event-info-row- 
    listing">
      <a href="https://adsler.co.uk/
    event/new-cross-and-deptford-free- 
    film-festival/">
        <div class="row">
          <div class="col- 
    md-1">
            <div class="organizer-logo">
              <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp- 
    content/uploads/event-manager-  
    uploads/event_banner/2019/05/2
    456d41f16399aed538d25b1cd32ad1
    4.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="event-title">
              <h4>New Cross and Deptford Free Film Festival</h4>
              <div class="boxes-view- 
    listing- 
    registered-code">
              </div>
              <div class="event- 
    organizer- 
    name">
                <normal>Deptford Film Festival
                  <normal></normal>
                </normal>
              </div>
            </div>
            <div class="col-md-2">
              <div class="date" <date>2019-05- 26
                </date>
              </div>
            </div>
            <div class="col-md-3">
              <div class="event- 
    location"><i class="glyphicon 
    glyphicon-map- 
    marker"></i> London </div>
            </div>
            <div class="col-md-2">
              <div class="event 
    ticket">#free</div>
            </div>
            <div class="col-md-3"></div>
          </div>
      </a>
      </div>
  </li>
  </div>
  <!-- Box Layout -->
  <a class="event_listing post-6985 
    type-event_listing status-expired 
    hentry" href="https://adsler.co.uk
    /event/new-cross-and-deptford-free- 
    film-festival/">
    <div class="box-layout">
      <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp- 
    content/uploads/event-manager-  
    uploads/event_banner/2019/05/2
    456d41f16399aed538d25b1cd32
    ad14.jpg"></div>
      <div class="boxes-view-box- 
    registered-code">
      </div>
      <div class="event-title">
        New Cross and Deptford Free Film Festival
      </div>
      <div class="event-start- 
    date">2019- 05-26
      </div>
      <div class="event-location">
        <i class="glyphicon glyphicon- 
    map-marker"></i> London </div>
      <div class="box-footer">
        <div class="event- 
    ticket">#free</div>
      </div>
    </div>
  </a>

Didn't work.

Answer 1

The problem is with your img tag. Your images are different heights so that you are having different heights of each box. You have 2 choices:

1- make all images with same width and height(not that easy)

2- you should fix img height, try something like:

#content .entry-summary img.wp-post-image, #content .entry-content img { 
height: 250px;
}

.box-layout { 
width: 100%
}

this should work as you want.

note that will be some margin on the left and right of each image because of different dimensions.

screenshot after editing as above:

Answer 2

The heights of your boxes are being determined by the size of the images. Luckily, your images are wrapped in a containing div with the class event-img. So, instead of resizing all your images, you could simply give .event-img a max-height of shorter than any of your images, and set it's overflow: hidden

.event-img {
    max-height: 190px;
    overflow: hidden;
}