Padding on Screen Sizes

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