Open LaurentNautilus opened 3 years ago
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
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.
Work fine, thanks.
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:![2](https://user-images.githubusercontent.com/53089400/115988695-8dbb4c00-a5c3-11eb-8f47-ee3c5a919dac.jpg)