css @media print for landscape mode

Question

I'm printing some images with a header/footer, and trying to distinguish between Portrait and Landscape using @media print queries.

In my first version, I was only using max-width: 8.5in - and it printed fine. However, if the user prints in Landscape mode the images get cut off at the bottom (which is expected).

I believe I don't have the correct min-height/min-width in either one or both media queries.

Here's the css:

/* 8.5in x 11in Portrait  (215.9mm x 279.4mm)*/
@media print and (max-width: 8.5in) and (max-height: 11in) {
  @page {
    margin: .4in;
  }
 
  .no-print { 
    display: none;
  } 

  .print-break {
    page-break-after: always;
  }

  article {
    width: 8.5in;
    height: 11in;
    page-break-inside: avoid;
  }
} 

/* 11in x 8.5in Landscape size printing (279.4mm x 215.9mm)*/
@media print and (min-height: 8.5in) and (max-width: 11in) {
  @page {
    margin: .2in;
  }

  .no-print { 
    display: none;
  } 

  .print-break {
    page-break-after: always;
  }

  article {
    width: 11in;
    height: 7.5in; 
    page-break-inside: avoid;
  }
}

ex/ Portrait mode prints fine. I printed to pdf.

Attempt to print in Landscape mode - is it NOT respecting the 2nd media query?

Answer 1

Final solution

/* 8.5in x 11in Portrait mode*/
/* fyi: Because the 'no-print' <section> markup in shared.service takes up some width */
/*       I had to use 5in and 7in for the min-width props (as opposed to 8.5/11in port/land) */
@media print and (min-width: 5in) {
  @page {
    margin: .4in;
  }  

  .no-print { 
    display: none;
  } 

  .print-break {
    page-break-after: always;
  }

  article {
    width: 8.5in;
    height: 11in;
    page-break-inside: avoid;
  }
} 

/*  Landscape mode */
@media print and (min-width: 7in) {
  @page {
    margin: .4in;
  }

  .no-print { 
    display: none;
  } 

  .print-break {
    page-break-after: always;
  }

  .rept-footer {
    margin: 5% 0 0 0; 
  }

  article {
    width: 11in;
    height: 7.5in; 
    page-break-inside: avoid;
  }
}