In the comments section of Using Flexbox for equal height columns in Digital Pro tutorial, the requestor wrote:
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.While it is possible to set equal height blocks using Flexbox with JS fallback for solid cross-browser implementation, in this article I show how matchHeight jQuery script can be used to set equal height of widgets (other than the first one, which is used for title) in Front Page 3 widget area of Digital Pro. Before: After:
Step 1Upload jquery.matchHeight-min.js to child theme's
jsdirectory. Create a file named say, matchheight-init.js in the same location having:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.