▼
Streaming live at 10am (PST)

What is the best way to give users a printer-friendly page option?

#1

BS"D
I’m trying to implement a printer friendly option for the user. I looked it up on the Webflow forum and then on Stack Overflow. I got the following answer there:

You can use CSS @media types.

<p> this should be part of the printed page </p>

<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>

A simplistic style sheet for the above would be:

@media screen
{
   /* whatever styles you have for display */
}

@media print
{
   .noprint { display: none; }
}

In the above, the

with the class=“noprint” will be displayed on screen as usual, but it will not be printed.

How do I implement something like this in webflow?

Thanks

#2

In Webflow a print stylesheet can only be done by adding custom code. BTW: Most browsers handle media for screen quite well for print. When there are exceptions, you can add specific custom media queries for print. There are some good (but older) articles on css for print media by Eric Meyer. A more recent article can be found here: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/