- Engage C&M
- Brand
- Campus Communications
- Media & News
- Social
- Web
- Events Calendar
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)
Add padding to certain screen sizes only
Padding styles can be used on specific screen sizes by adding lg-, md-, mds- or sm- in front of the pad CSS class. For example, lg-pad-left - adds 50px padding to the left of the component on large screens only. Review padding styles for more information about padding (link to padding section).
Screen sizes:
- Large – 980px and above
- Medium – 755px-979px
- Medium/small – 528px-754px
- Small – up to 527px
How to
1. Edit the component you wish to add padding to
2. Add one of the class names to the CSS style field of the component.
Styles:
The class name includes the size (lg, md, mds, sm), then the padding (pad), then which side of the component to add the padding (all, top, bottom, left, right)
Lg - sets the component to apply the style at large screen size
lg-pad-all
lg-pad-top
lg-pad-bottom
lg-pad-top-bottom
lg-pad-left
lg-pad-right
lg-pad-left-right
Md - sets the component to apply the style at medium screen size
md-pad-all
md-pad-top
md-pad-bottom
md-pad-top-bottom
md-pad-left
md-pad-right
md-pad-left-right
Mds - sets the component to apply the style at smaller medium screen size
mds-pad-all
mds-pad-top
mds-pad-bottom
mds-pad-top-bottom
mds-pad-left
mds-pad-right
mds-pad-left-right
Sm - sets the component to apply the style at small screen size
sm-pad-all
sm-pad-top
- sm-pad-bottom
- sm-pad-top-bottom
sm-pad-left
sm-pad-right
sm-pad-left-right
