Print full width

This provides styles for setting an element to be full width that only apply when the page is printed.

The following sizes are available and are the same:

• print-w-1
• print-w-1-1

They both set the width to 100%.

Each width size has a class to go with each of the media query viewport sizes. For example:

print-w-1-1-3xs
print-w-1-1-2xs
print-w-1-1-xs
print-w-1-1-sm
print-w-1-1-md
print-w-1-1-lg
print-w-1-1-xl
print-w-1-1-2xl
print-w-1-1-3xl
print-w-1-1-4xl
print-w-1-1-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/width/print-width-1.css';

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS

Default styles

width/print-width-1.css

@media print {
    .print-w-1,
    .print-w-1-1 {
        width: 100%;
    }
}

3xs styles

width/3xs/print-width-1.css

@media (--m-3xs) {
    @media print {
        .print-w-1-3xs,
        .print-w-1-1-3xs {
            width: 100%;
        }
    }
}

2xs styles

width/2xs/print-width-1.css

@media (--m-2xs) {
    @media print {
        .print-w-1-2xs,
        .print-w-1-1-2xs {
            width: 100%;
        }
    }
}

xs styles

width/xs/print-width-1.css

@media (--m-xs) {
    @media print {
        .print-w-1-xs,
        .print-w-1-1-xs {
            width: 100%;
        }
    }
}

sm styles

width/sm/print-width-1.css

@media (--m-sm) {
    @media print {
        .print-w-1-sm,
        .print-w-1-1-sm {
            width: 100%;
        }
    }
}

md styles

width/md/print-width-1.css

@media (--m-md) {
    @media print {
        .print-w-1-md,
        .print-w-1-1-md {
            width: 100%;
        }
    }
}

lg styles

width/lg/print-width-1.css

@media (--m-lg) {
    @media print {
        .print-w-1-lg,
        .print-w-1-1-lg {
            width: 100%;
        }
    }
}

xl styles

width/xl/print-width-1.css

@media (--m-xl) {
    @media print {
        .print-w-1-xl,
        .print-w-1-1-xl {
            width: 100%;
        }
    }
}

2xl styles

width/2xl/print-width-1.css

@media (--m-2xl) {
    @media print {
        .print-w-1-2xl,
        .print-w-1-1-2xl {
            width: 100%;
        }
    }
}

3xl styles

width/3xl/print-width-1.css

@media (--m-3xl) {
    @media print {
        .print-w-1-3xl,
        .print-w-1-1-3xl {
            width: 100%;
        }
    }
}

4xl styles

width/4xl/print-width-1.css

@media (--m-4xl) {
    @media print {
        .print-w-1-4xl,
        .print-w-1-1-4xl {
            width: 100%;
        }
    }
}

5xl styles

width/5xl/print-width-1.css

@media (--m-5xl) {
    @media print {
        .print-w-1-5xl,
        .print-w-1-1-5xl {
            width: 100%;
        }
    }
}