Columns and screen size

U of S websites are designed to work on any device. That means your website will look a little different depending on the type and size of device on which it's viewed.

Four columns on a desktop screen might display as two rows of two columns on a tablet and one single column on a phone. Keep this mind when designing your pages, and don't forget to view your site on your phone and tablet.

Create columns

Setting your Section's Content Blocks to display as columns in Cascade
  • Select Columns as the Content Blocks layout of your Section

The number of columns depends on both the number of Content Blocks in the Section and the screen size being used to view the page.

Screen size2 Content Blocks3 Content Blocks4 Content Blocks
Large 1 row of 2 columns 1 row of 3 columns 1 row of 4 columns
Medium 1 row of 2 columns 1 row of 3 columns (w/o Sidebar), 2 rows with 2 columns on top and 1 below (w/ Sidebar) 2 rows of 2 columns each
Small 1 continuous column 1 continuous column 1 continuous column

Keep it simple! Columns are great for creating order and flow, but if your page is loaded with columns you might be creating chaos.

Basic example

Block 1

This is the first Content Block in this Section.

Block 2

This is the second Content Block in this Section.

Block 3

This is the third Content Block in this Section.

Block 4

This is the fourth Content Block in this Section.

Content scaling

Perfect fit

Any type of content, including media such as images, videos and maps, automatically scales to fit the width of its column.

This placeholder could be an image, video, or map.

Be careful

This placeholder could be an image, video, or map.

Sometimes scaling content to fit in a column makes that content less usable.

For example, when media is aligned left or right it can get a little squishy in a column. If the media in this column was a map it would probably be pretty useless. But as an image it might be ok.

If columns are over-squishing your content, consider another layout option.

Multiple rows in a section

There may be times when you want multiple rows of columns or different column configurations in one section. This section is an example: One wide column is spanning the width of two columns underneath. To do this you just have to get a little creative!

Two sections

Create a section for each layout style that you want to use. In this case there is a section with a Normal layout (above), and another section with a Columns layout (this one).

One section heading

Only put a Section heading on the first section. This way both sections appear as as one to the user, but multiple layouts are combined.