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.
- 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 size||2 Content Blocks||3 Content Blocks||4 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.
This is the first Content Block in this Section.
This is the second Content Block in this Section.
This is the third Content Block in this Section.
This is the fourth Content Block in this Section.
Any type of content, including media such as images, videos and maps, automatically scales to fit the width of its column.
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!
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.