What is Height Matching?

All Splash pages are built using blocks, meaning they are quite literally the building blocks of Splash. Occasionally, blocks are designed using a 2-column layout. Most pages also include blocks that use our Repeatable functionality, which is frequently seen in the form of a List, Schedule, Speaker or Sponsor block. 

What do these types of blocks have in common other than starting with the letter "B"?

Allow us to introduce you to a functionality we call Height Matching. 

What is Height Matching?

By Enabling Height Matching on a Block or Container, you are basically saying "X container should match the height of the Y container if it scales to be a larger size".

Height Matching can be enabled and disabled in 3 places in Splash:

1. Blocks

Screen_Recording_2019-02-22_at_11.36_AM.gif

2. Containers

Screen_Recording_2019-02-22_at_11.37_AM.gif

3. Repeatable cards

Screen_Recording_2019-02-22_at_11.40_AM.gif

 

Does Height Matching function the same way on Blocks and Containers as it does on Repeatables?

Blocks & Containers

While the concept remains the same for both, there is one main difference. Height Matching settings can differ across devices when set on Blocks and Containers, while the setting must remain the same across devices when used on Repeatables.

For example, on a Block or Container you can have Height Matching Enabled in Desktop view and Disabled on Phone and/or Tablet views, since having it turned on across all devices may cause some additional spacing to appear on smaller screen sizes.

Repeatables

There are 3 different Height Matching settings that can be used on Repeatables:

1. Disabled - removes all Height Matching settings, so repeatable cards do not display consistently.

Screen_Shot_2019-01-31_at_4.21.56_PM.png

2. Elements Same Height - scales repeatable cards to match the height of the card containing the tallest element(s); all element heights become consistent.

Screen_Shot_2019-01-31_at_4.22.30_PM.png

3. Cards Same Height - scales repeatable cards to match the overall height of the tallest repeatable card; element heights may vary.

Screen_Shot_2019-01-31_at_4.23.29_PM.png

Just keep in mind that whichever setting you choose must remain the same across Desktop/Phone/Tablet. 

Seeing some white space below your Repeatable cards on the mobile view? Check out our FAQ: How do I remove the extra space under my Repeatable cards on mobile?

Was this article helpful?
0 out of 0 found this helpful