Show/Hide Elements In @media print

[Historical Forums User]

I have a contact us section of a page that I want to use display: none; by default but then display it when printing with @media print, but when I use display: block, even when more specifically addressing the elements and adding !important it doesn’t work. Here’s a code example:

Regular CSS:

.contact-text { display: none; }

Print CSS:

@media print { .contact-text .paragraph-text { display: block; } }

What am I doing wrong?

[rkieru]

In the example you’ve provided your display: block is only ever applying to the class .paragraph-text found within an element with the class of .contact-text.

You’re still leaving display: none valid at .contact-text level, which would override any visibility of nested elements, regardless of declarations like !important

[Author]

Posts