Width - Print

This provides classes for setting the width of elements that only apply when the page is printed. They are wrapped in a @media print query so they can override the screen widths in printed output.

The following widths are available:

• Auto width
• Full width
• Halfs
• Thirds
• Fourths
• Fifths
• Sixths
• Sevenths
• Eighths
• Nineths
• Tenths

Combined imports

If you will use all of the width sizes then you can use the combined import file. The combined import file includes both the screen widths and the print widths.

@import 'cacao-css/dist/width/combined-import.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/width/3xs/combined-import.css';
@import 'cacao-css/dist/width/2xs/combined-import.css';
@import 'cacao-css/dist/width/xs/combined-import.css';
@import 'cacao-css/dist/width/sm/combined-import.css';
@import 'cacao-css/dist/width/md/combined-import.css';
@import 'cacao-css/dist/width/lg/combined-import.css';
@import 'cacao-css/dist/width/xl/combined-import.css';
@import 'cacao-css/dist/width/2xl/combined-import.css';
@import 'cacao-css/dist/width/3xl/combined-import.css';
@import 'cacao-css/dist/width/4xl/combined-import.css';
@import 'cacao-css/dist/width/5xl/combined-import.css';