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.

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