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?