CSS: equal height columns
10,798
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>
Author by
Admin
Updated on June 18, 2022Comments
-
Admin almost 2 years
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