Sridhar Katakam

Genesis and WordPress Tutorials

Using Flexbox for equal height columns in Digital Pro

by 3 Comments

In Genesis Facebook group, a user wrote:

I am currently working on a site using Digital-Pro and I was wondering how I can implement some CSS in order to make sure the text widgets have the same height regardless of the text?

In the theme Demo, the Front Page 3 Widget Area: all the text widgets are aligned because they almost have the same number of characters or words.

In my case they are quite close in regards the number of words and still not fully aligned.

By simply setting the display of container and the items as flex, items will get equal height. Once done, we can position the buttons absolutely relative to the three widgets so they appear at the bottom.

Before:

Digital Pro – A Professional Theme for Business

After:

Digital Pro – A Professional Theme for Business(1)

Make these changes in Digital Pro‘s style.css:

1) Near the top of media queries section, add

@media only screen and (max-width: 860px) {
#front-page-3 .widget-area a.button {
padding: 12px 15px;
}
}
view raw gistfile1.css hosted with ❤ by GitHub

2) Inside the 801px media query, add

#front-page-3 .widget-area {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#front-page-3 .widget-area a.button {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#front-page-3 .widget:nth-child(2),
#front-page-3 .widget:nth-child(3),
#front-page-3 .widget:nth-child(4) {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
padding-bottom: 50px;
}
view raw gistfile2.css hosted with ❤ by GitHub

3) Inside the 800px media query, add

#front-page-3 .widget-area a.button.small {
padding: 12px 20px;
}
view raw gistfile3.css hosted with ❤ by GitHub

References:

http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

http://codepen.io/enxaneta/full/adLPwv/

  • Hi Sridhar,

    I was the one that asked this question and I have implemented this with 5 widgets (instead of 4 like your example) and it is not working. It breaks for both Safari and IE and I have run out of pixel pushing approaches.

    I am a paid member of your tutorials and this would be very helpful for me to fix.

    Thanks in advance.

    Regards,

    Antxon

    Reply
    • >