Equalize

Equal Heights

IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, check this page for the old equalize plugin page. This page will be available until all templates have been upated using the latest verison of the Framework.

Columns can now be equalized in heights using flexbox. If using the flexbox model instead, the equalize height plugin will only be used as a fallback for older browsers that do not support the flexbox model.


Resource Files

If support for IE10 or below is required, the following resource files are required:

Js
								
									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src="js/jquery.tm.equalize.min.js"></script>
								
							

Equalizing Columns

To equalize columns we simply add the class .flex to a .row wrapper.

Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs

Box 3
  • Sed ut perspiciatis
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
  • Accusantium
  • Ratione voluptatem
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
HTML
								
									
Content
Content
Content

Vertical Alignment

The benefit of using the flexbox model is that content can easily be vertically aligned within a column without having a fixed height. To vertically align content we first need to wrap the content in a new div that will be vertically aligned. We can then add the class .v-align-middle to .column to vertically align the content in that column.

Box 1

This columns content is vertically aligned and will remain vertically aligned as the tallest column grows.

Box 2

As will this content.

Box 3
  • Sed ut perspiciatis
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
  • Accusantium
  • Ratione voluptatem
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem

HTML
								
									
Content
Content
Content

Equalizing Boxes

At times it can be useful to equalize boxes within columns as well. We can do this by adding the classes .flex.boxes to a .row wrapper, which will target any boxes nested directly under a column.

Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs

Box 3
  • Sed ut perspiciatis
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
  • Accusantium
  • Ratione voluptatem
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
Box 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Box 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation.

Box 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, liquip ex ea commodo consequat.

HTML
								
									
Content
Content
Content

Vertical Alignment In Boxes

As with regular columns, we can vertically align any content within boxes as well by first wrapping the content in a new div and then adding the class .v-align-middle to .column.

Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs

Box 3
  • Sed ut perspiciatis
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
  • Accusantium
  • Ratione voluptatem
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
HTML
								
									
Content
Content
Content
Theme Mountain

Current Version