"@media print" not working

Hi all,

I’ve been trying to hide certain elements of my websites on printing by using “@media print” and applying “display: none !important” to the appropriate elements in the CSS, but it doesn’t seem to be working properly (see screenshots). All of the elements are still visible when printing the web page. For reference, I’ve been testing this on website ID 335230.

Thank you for your help.

image

Hi! Adding the @media print query inside the Asset manager → (S)CSS Tab is not going to work, because this entire (S)CSS will be compiled into one CSS file (custom.css) and added into the website <head> tag with the media attribute set to screen. In other words, the print query is ignored.

I guess the easiest way (if you have just a few classes) is to add some CSS in the Asset manager → HTML Tab before the {{content}}
Here is how:

Hope this helps!

3 Likes

That worked perfectly! Thank you.

2 Likes