Vertical align of grids content

[LaurentNautilus]

Hello! Thanks a lot for the skin!

I am having problems with the grid when the cells are of different sizes. For example:

As you can see, the content in the first two cells is stuck to the top, and I would like to place it in the center, like this:

[LaurentNautilus]

I fixed this with apply the following code to the .row
display: flex; align-items: center;
But it breaks responsive design - column classes stop working.
I fixed it again with
@media only screen and (max-width:640px) { .row {display: block;} }
but it looks like kludge

[Hutchy68]

You want to do something like this.

<div class="row valign-middle">
<div class="large-3 columns">
Content....
</div>
<div class="large-3 columns">
Content....
</div>
<div class="large-3 columns">
Content....
</div>
<div class="large-3 columns">
Content....
</div>
</div>

Then add this CSS

.valign-middle {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

A row row CSS chain tends to have a wider width issue. So you might want to wrap the whole thing in a

<div class="large-12 columns">
<div class="row valign-middle">
then all the columns
</div> /* end row */
</div> /* end large-12 columns */

Try them both and post back.

[LaurentNautilus]

Work fine, thanks.