- 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)
Hiding components on mobile / tablet / desktop view
Not all components work well on all screen sizes. To hide certain components on mobile and display on desktop only, or hide on desktop and display on mobile only, you can apply a class style for each component until you achieve your desired outcome.
How to
1. Add separate components for both screen views you wish to reveal and hide. (i.e., One for mobile and one for desktop, and one optional one for tablet if needed).
2. Edit the component you need to modify.
3. Add one of the class names below to the CSS class field.
Styles:
- mobile - Displays the element on mobile-size screens only
- tablet - Displays the element on tablet-size screens only
- desktop - Displays the element on desktop-size screens only
Note: you can combine two of the three class names, to reveal on more than one view. (For example, to display an item on both mobile and tablet but hide it in desktop, you can add both class names separated with a space to the CSS class field)
4. Test the display styles by resizing your browser window, and ensure it displays only on the desired screen size.
- Stretch your browser window to larger size for desktop view and any component set for mobile should be hidden.
- Shrink your browser window to a smaller window size to mimic a mobile or tablet device and the item for desktop should now be hidden
5. To edit a component that is hidden on mobile or tablet view, simply resize your browser until it's narrow enough to mimic a mobile or tablet device. This will make the component reappear.