CSS: equal height columns
In this website I would like to define an equal Height for the columns with the questions.
I am using Materialize CSS as Framework.
Is this possible?
This is my actual HTML:
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m6 question-one">
<div class="icon-block">
<h2 class="center light-blue-text"></h2>
<h5 class="center">How can I buy simple products fast and easy?</h5>
</div>
</div>
<div class="col s12 m6 question-two">
<div class="icon-block">
<h2 class="center light-blue-text"></i></h2>
<h5 class="center">How can I buy my ongoing demand in some minutes?</h5>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 question-three">
<div class="icon-block">
<h2 class="center light-blue-text"></h2>
<h5 class="center">How can I get mobile access to documentation / spare parts of my devices?</h5>
</div>
</div>
<div class="col s12 m6 question-four">
<div class="icon-block">
<h2 class="center light-blue-text"></h2>
<h5 class="center">How can I find the fitting product to my application?</h5>
</div>
</div>
</div>
</div>
<br><br>
This is the CSS:
.question-one {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
.question-two {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
.question-three {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
.question-four {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
Thanks in advance
Solution 1:
Flexbox was born for this. This is how I approached it on MaterializeCSS.
.flex {
display: flex;
flex-wrap: wrap;
}
and on the parent row add
<div class="row flex">
<div class="col"></div>
<div class="col"></div>
</div>