1

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.

enter image description here

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

enter image description here

bob.mazzo
  • 5,183
  • 23
  • 80
  • 149
  • Have you tried [orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation) media query? – Zach Jensz Apr 21 '22 at 07:28
  • 1
    @ZachJensz yes but I realized that the `.no-print` section of the markup is what totally messes that up. i.e. the markup that gets hidden on print takes up some horiz space. – bob.mazzo Apr 22 '22 at 18:51

1 Answers1

0

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;
  }
}
bob.mazzo
  • 5,183
  • 23
  • 80
  • 149