-2

Hey I am wondering if lets say you have a media query in one css for mobile and the print css needs to ignore that particular media query. How would I do this?

3 Answers3

3

There are 2 ways you could do that.

Either you create a stylesheet with the style that will be print (so different from the actual style of your page) and link it to your html file like this for example:

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

Or below your media query, you add a media query specific for printer (so it will be applied only for printed page) like this:

@media **print** { //your code }

Let me know if it helped or if you were thinking about something else.

Gini
  • 121
  • 1
  • 6
  • No sorry it doesn't work :( Lets say I have a print query and a width query on the same page at the bottom, and I want the print query to ignore the width query. –  Nov 01 '15 at 03:36
  • Currently your code does not do that –  Nov 01 '15 at 03:36
3

Ok then maybe you could give this a try:

With CSS3 (not CSS2.1) it seems that you can nest @media rules, so do:

@media not print { @media (max-width:...px) { //your code } }

Gini
  • 121
  • 1
  • 6
  • n/p, I'm happy it helped ;) – Gini Nov 01 '15 at 04:38
  • Sorry I was going to say something. It worked but it is not valid. I read you are meant to use and instead of nesting. Any ideas? –  Nov 01 '15 at 04:44
  • so so far what's the error ? is it working or the code is invalid with yours ? – Gini Nov 01 '15 at 04:54
  • It works yes but when I try validate it, it has errors and apparently you are not meant to do it. http://stackoverflow.com/questions/16114000/nesting-media-queries –  Nov 01 '15 at 04:56
1

Remember you are working with CASCADING style sheets!:) If you want your print query to override something you have in your media query just zero it out! for example:

@media screen {
  body {
   margin: 1px;
  }
}
@media print {
 body {
  margin: 0px;
  }

Let me know if this helps!

Full Stack Alien
  • 11,244
  • 1
  • 24
  • 37
  • Yes I understand this but then the print query will be huge, I am looking for a way to just ignore the screen query –  Nov 01 '15 at 03:52