web counter
Wuthering heights
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Wuthering heights

Match Height from Joe Workman, Review By Rob Hall, CEO at rjh Web Design Rating: 5 out of 5. Match Height is the stack that has been missing from your collection for years. It's very much a stack you will purchase once and use hundreds of times!

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!

blog comments powered by Disqus

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

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

My Image

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required