How to make @media print ignore @media max-width

Question

I have a problem in my css that is generating a "mobile" layout at the time of printing, I have a @media max-width that makes my site responsive, however I would like to ignore it on @media print and print only the desktop layout, would have some way to do that?

Answer 1

Yes, you make them act only on the screen or printing using @media only for example

@media only screen and (max-width: 1024px) {
   // somente tela
}

and then

@media print {
   // impressão
}

More information here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

You must do something like this:

@media not print {
     @media (min-width:500px) {
         /* o teu estilo */
     }
}

This basically performs as (not print) and (min-width: 500px).

I hope I’ve helped. :)