I would like to hide elements from the HTML rendered in a browser but have them render in the generated PDF. How can I accomplish this? Is there a CSS property I can add to the class to hide it only in the HTML? I tried

display: none

but that hid the elements in both the HTML and PDF.


In the attached screenshot, you can see there are two Example Headers and I would like to hide the second one that says "Example header to be hidden in HTML" but still have it render in the PDF.

1. doubleheader.png‎ 53.3 kB

How about wrapping the CSS rule in `@media print {}` ?

I tried

@media screen {
  .subheader-continued {
    display: none;
  }
} 

and it worked! Thanks @mikeday !!