- About
- Submit
- Tools
- Guides
- Equity, Diversity and Inclusion guide
- Multimedia Consent Guide
- Formal studio portraits
- SFU News
- Brand guide
- Communication strategy
- Editorial style guide
- Media guide
- Project management
- Self-recorded video
- Social media
- Website content guide
- Website project guide
- Website Design Guide
- What makes a good story?
- URL request guidelines
- Blog
- C&M staff
Designing for Different Screen Sizes
Content is automatically adjusted for different screen sizes to make it accessible for tablets, mobile devices or desktop computers. You can also customize your page layout for these different screen sizes by:
Customizing layouts to stack earlier on smaller screen sizes (tablet or mobile screens)
Hiding components on certain screen sizes (desktop, tablet or mobile)
Add padding only on certain screen sizes (desktop, tablet or mobile)
customizing Stacking Layouts for tablet and mobile screens
A specific class style can be used to create different layouts for mobile and desktop views. For example, if content in two columns becomes crowded when the browser size is small, you can set those two columns to stack in a smaller screen size. It’s always better to stack earlier so ensure the content doesn’t appear too crowded.
Large size – 980px and up
Medium size – 528px-979px
Medium small size – 528px-754px
Small – up to 527px
How to
To stack columns in medium screen size (528px – 979px), add one class name to CSS Class field of the column control component
md-stack - Stacks all columns on top of each other at the medium screen size.
md-stack-first - Stretches the first column to 100% of the screen width with the other two columns stacked underneath at 50% and 50% (side-by-side) for medium screen size.
md-stack-last - Stretches the last column to 100% of the screen width with the other two columns stacked above at 50% and 50% (side-by-side) medium screen size.
To stack columns in a medium small screen size (528px - 754px), add one class name to CSS Class field of the column control component
mds-stack - Stacks all columns on top of each other at the medium-small screen size, respectively.
mds-stack-first - Stretches the first column to 100% of the screen width with the other two columns stacked underneath at 50% and 50% (side-by-side) for medium-small screen size.
mds-stack-last - Stretches the last column to 100% of the screen width with the other two columns stacked above at 50% and 50% (side-by-side) medium-small screen size.
