Home ▻ T4 Training▻Training▻Training Examples▻Advanced Hacks▻Columns

Columns

Columns

Multiple columns should be used sparingly - there are only a few cases where they are optimal from an User Interface / User Experience point of view.
If you do need thim in  a webpage - you have to be careful that it's mobile-friendly.
Please use one of the example approaches in this section:

3 Columns

Using the 'NUIG Code Only' content type, there are 3 slightly different approaches:

Method 1: 3 Divs - 1 for each column (each column can be as long as you like):

This is the first column

This is the 2nd column

This is the 3rd column

Method 2: Multiple Divs - 1 for each cell - tightly bunched:

This is the first column

This is the 2nd column

This is the 3rd column

This is the 4th column

This is the 5th column

This is the 6th column

Method 3: Multiple 3-Column Lines - 1 div for each cell - vertical spacing between cells:

This is the first column

This is the 2nd column

This is the 3rd column

This is the 4th column

This is the 5th column

This is the 6th column

There's also a '3 Column Text' content type, that is rarely used. You may even neeed to request access to use this CT in your site (it's not normally made available to editors):

Title 1 (500 chars max)

Description: (1000 chars max). This is the 3 column text content type, which is rarely used.

Call To Action

Title 2 (200 chars

Descripton: max 500 chars allowed. Each column needs a 70x70px icon - directly uploaded from your

Call to action

Title 3 (200 Chars Max)

Description (1000 chars max). Different sizes in equivalent fields makes this cumbersome to use - recommend avoiding this CT.

Call to action (link) - 500 chars max

2 Columns

Using an 'NUIG Code Only' Content Type:
Dr. Emer McGrath
Dr Alison Liddy NUI Galway
Optional text in the bottom div which spans across both columns. You can leave this div empty.

2 Column Text

You add content into this content type as normal but it gets automatically split into 2 columns - even if you have only 1 sentance in it.

This is recommended for shorter block of text only, as multiple columns can be hard to read.