How to Create Columns in a Hubspot COS Website that Auto-scale to the Longest Single Column

In this tutorial I’ll show you how to create a custom module that will format multiple columns with equal heights in the Hubspot COS website platform. The module’s core functionality utilizes the CSS3 rule commonly called, “Flexbox.”

If you want to see all the possibilities of Flexbox, check out CSS-Tricks for an easy to digest article.

One of the benefits of the Hubspot COS vs. WordPress or some other CMS is that, while you cannot easily create a plug-in for a WordPress website, you can easily add some nice functionality to the Hubspot COS using custom modules.

While straight forward (there is no scripting), the key features of this module include:

  • Front-end loading.
  • Auto-formats for 2, 3, or 4 columns.
  • Fully responsive—Unlike some other CSS hacks out there.
  • Works with all browsers that support CSS3.

Ever attempt to do this?

flex-box-good.jpg

But you end up with this?

flex-box-incorrect.jpg

See the horrible looking unequal height columns?

And then you end up doing some CSS hack like messing with "min-height" for each column. Not the best way to go, especially when you can use the new CSS3 "flex-box" formatting.

Let's start:

Create a Hubspot COS Flex-box Custom Module 

Step 1: Create the new module

  1. Click this quick Hubspot tutorial. Accomplish tasks 1, 2, 3.
  2. Name your custom module: “Flex Box Module.”

Step 2: Paste in markup

Once you name the module and create it, you'll be presented with a blank field.

Make sure you copy and paste the code exactly as shown.

flex-image-1.png

Copy and paste everything between the two ==== lines into the blank field shown above.

================================

<style>

/* 
HS FLEX BOX MODULE FOR 2, 3 OR 4 COLUMNS | DEV BY COHORTMARKETING.COM
 */

.flex-module-wrapper {
display: -webkit-flex;
display: flex;
height: auto;
}

/*** I-pad portrait and smaller responsive styles ***/
@media all and (max-width: 768px) {
.flex-module-wrapper {
display: table;
}

.flex-col img {
float: left;
padding: 0 15px 4px 0;
}
}
/*END RESPONSIVE */

.flex-col {
background-color: #eeeeee;
border: 4px solid #fff;
flex: 1 1 0;
height: auto;
padding: 8px;
}

</style>


<div class="flex-module-wrapper">
<div class="flex-col"</div>
<div class="flex-col"</div>


</div>

================================

Step 3: Create and format the fields

  1. At the bottom left of your window, click + Add new field.
  2. Click “Rich text."

flex-image-2.png

 

  1. In the "Label" field, enter, "col_1" as shown below.
  2. Click, "create new field."
  3. Repeat this process a total of four times, sequentially naming the fields “col_2” “col_3” “col_4”

flex-image-3.png

 

Your custom module is now complete and should look like this:

flex-image-4a.png

 

Step 4: Click "Publish"

How to Use the Module

Step 1: Install your custom module in the template of your choice

Simply drag the custom module where you want it. In Design Manager, the modules are all located in the left sidebar.

flex-image-5.png

If you mess something up, you always can go to “Actions >  View revisions” and roll back to an earlier save.

Step 2: Create or associate a page with this template

You're now done with Design Manager.

In your Hubspot website page, click on the blank module. It will look like this in a new page:

flex-image-6.png

Step 3: Format the module fields

You’ll be presented with four Rich Text fields in the left sidebar. You must populate at least the first two Rich Text fields. The module will format for 2, 3, or 4 columns automatically. Add photos and text to each one, as you wish.

flex-image-7.png

Optionally, modify the CSS styles within the module's CSS classes to change colors and formatting.

Notes:

  • With older browsers that do not support CSS3, the module will gracefully fail to a single column, the same as it will display on most tablets and smaller portable devices.
  • Modules can only be used for Hubspot website pages and landing pages, not in blog posts.

Was this tutorial helpful? 

My goal is to share easy to adopt tools for getting the most out of your Hubspot website and marketing platform.

If you found value in this Hubspot tutorial, please share your comments below! 

Download The Ultimate WorkSheet for Redesigning Your Website

 

Topics: Learn Hubspot COS

John Pate, Chief Marketing Scientist

Written by John Pate, Chief Marketing Scientist

John is owner and founder of Cohort Marketing. He is a regular contributor to various online media and is a featured speaker at key marketing events in the Raleigh - Durham area.

Skill Level
Comfortable with Hubspot templates
Basic CSS editing

Subscribe To Email Updates