[SOLVED] Make a survey page not printable with CSS

Make a survey page not printable with CSS

Hey I am building a survey website for a university project. I am using a tool called unipark(tivian) and I can upload CSS pages for my survey. How can I male it that the page is totally normal but when someone clicks on „print“ to screenshot the page it appears empty for them. I need to do that because of the copyright security. Thanks in advance :)

I tried it with a css file like this:

body {display: none;}

But now the whole page is empty from the beginning.

Solution

You can use the following css (make it a new print.css file for example):

/* Hide all elements when printing */
body {
    display: none;
}

/* Show a message indicating that printing is not allowed */ 
@media print {   
    body::before {
        content: "Printing is not allowed due to copyright restrictions.";
        display: block;
        font-size: 24px;
        margin: 50px;
} }

Then add the following to your file:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

When you add media="print" to the html, it will be only applied when page is being printed.