I know this topic has already get an answer here, but there is a little difference in my case.
You have to know that unfortunately I can't edit the HTML because I use Visual Composer for WordPress that generate its own HTML. I can only add classes or IDs on HTML tags via Visual Composer in the WordPress backoffice. It will be so long to edit the HTML of every Visual Composer blocks (with the WordPress text mode). So I have to find another efficient way to do it.
So, to align all the items between them I tried many solutions:
I first tried to use a min-height on the parent div that is set to a relative position, then I put the buttons at absolute position with a bottom of 0. It worked for the buttons alignment but I want it to be automatic and managed by itself in case when there is more text content and I don't want to change several times the min-height in several responsive modes.
So I tried the FlexBox solution of the link I shared above. This solution works when we have only an image, a text and a button, but in my case I have a title between each of the images and text contents, so it means we can have a title on 1 line or 2 lines or more... The problem with that is a misalignment of the titles between themselves and the "Lorem Ipsum" texts as well.
How can I manage it?
Thank you for the help.
I provided the code snippets to see my issue:
.sameblockheight, .wpb_wrapper {
display: flex;
flex-direction: column;
}
.vc_column-inner {
flex-grow: 1;
display: flex;
}
.wpb_wrapper {
flex-grow: 1;
justify-content: space-between;
}
.subrow {
display: flex;
}
.subrow > div {
width: 200px;
}
.vc_column-inner {
padding: 6% 8%;
}
.button-blue {
text-align: center;
}
.alignnone {
margin-left: auto;
margin-right: auto;
display: block;
}<div class="subrow">
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner vc_custom_1530896965169">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title on 1 line</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
<a class="button-blue" href="#">Learn more</a>
</div>
</div>
</div>
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title on 2 lines ...............................</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
<a class="button-blue" href="#">Learn more</a>
</div>
</div>
</div>
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner vc_custom_1530896977260">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
<a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
</div>
</div>
</div>
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner vc_custom_1530896983086">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
<a class="button-blue" href="#">Learn more</a>
</div>
</div>
</div>
</div>The only solution i can think of with only CSS is to add a min-height to your titles h5. For example i added min-height:40px and now, all the h5 are equal in height. You can set a bigger/smaller one.
The downsize is that if a title is larger that the min-height you set you have that problem again.
One fullproof solution would be to add a little javascript/jQuery to make the h5 equal in height without setting a 'hardcoded' min-height.
If you want/can use javaScript/jQuery let me know and i'll make a solution with that. If not, and you want to use only CSS, the below solution is the only one that i can think of.
h5 {
min-height:40px;
margin-top:0;
}
.sameblockheight, .wpb_wrapper {
display: flex;
flex-direction: column;
}
.vc_column-inner {
flex-grow: 1;
display: flex;
}
.wpb_wrapper {
flex-grow: 1;
justify-content: space-between;
}
.subrow {
display: flex;
}
.subrow > div {
width: 200px;
}
.vc_column-inner {
padding: 6% 8%;
}
.button-blue {
text-align: center;
}
.alignnone {
margin-left: auto;
margin-right: auto;
display: block;
}<div class="subrow">
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner vc_custom_1530896965169">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title on 1 line</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
<a class="button-blue" href="#">Learn more</a>
</div>
</div>
</div>
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title on 2 lines ...............................</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
<a class="button-blue" href="#">Learn more</a>
</div>
</div>
</div>
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner vc_custom_1530896977260">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
<a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
</div>
</div>
</div>
<div class="sameblockheight grid-col-3">
<div class="vc_column-inner vc_custom_1530896983086">
<div class="wpb_wrapper">
<p>
<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
</p>
<h5 style="text-align: center;">Title</h5>
<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
<a class="button-blue" href="#">Learn more</a>
</div>
</div>
</div>
</div>