Match Height is the stack that, annoyingly, has been missing from your collection for years.
The typical situation: You have two or more columns of text with varying heights. There are two options open — either you edit the text until both columns match, or you can play around with proportional spacers until you reach the desired result and hope that your columns will line up on desktop, and various tablet sizes …
Enter solution number three – Match Height.
Drop a Match Height stack onto your page, drop the columns in question into it and …
… nothing 'and', you're finished already. Your columns are now the same length and, when they reflow to fit a mobile screen, they will revert to their original length. Nothing could be simpler.
So where was this stack, when I needed it four years ago?
Match Height consists of two stacks: Match Height and Match Columns. The standard setting for Match heights is 'Columns' you drag your columns into the stack and their heights are matched. There are further settings available for various other integrations: Foundation, Sections Pro, Sections Box, Jack, Diagonal Thing and Foundry, as each of these stacks require differing jquery settings. Just reset the Match Height preferences if you are matching any of these stacks.
The second stack is Match Column. Match Column is a column stack into which you may add your header, paragraph or image stacks, etc. Apply an ID to each Match Column stack and drop it into a Match Height stack. Add rules to the Match Height stack and each Match Column stack with the same ID will be set to the same height.
The headers, and paragraphs of the outer stacks have been matched with Match Columns
The Match Height demo page is included with the stacks and supplies detailed reference if you find the setup more difficult than you thought it would be — it isn't, I assure you, but I had to refer to the demo to find out how Match Column works …
20 out of 10, Andrew Tavernor! This stack has been missing from my collection for years!
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.