CODEWITHSUNDEEP
htmlcss
ControlAltDel
ControlAltDel

Reputation: 35051

CSS media:print include something that wasn't displayed on screen?

I have the following

@media print {
  DIV {
    display: block;
  }
}
<html>
<body>
<div style="display:none">You can't see me!</div>
</body>
</html>

But when I tried this, I still couldn't see "You can't see me!" when I print. How can I get this to show up for printing?

Upvotes: 0

Views: 64

Answers (2)

ExtremeCode
ExtremeCode

Reputation: 114

First of all, from your code I can see you use an inline style of display: none. This will prevent the div from showing. Remove the inline style to correct this.

Upvotes: 1

sam
sam

Reputation: 2984

Assign a class to your div so you can specify what needs to be seen when being printed:

<html>
    <body>
        <div class="print-only">You can't see me!</div>
    </body>
</html>

Then your CSS would look like:

.print-only {
    display: none;
}
@media print {
  .print-only {
    display: block !important;
  }
}

Upvotes: 3

Related Questions