Feeling a bit frustrated here, I've tried everything but my project seems to break whenever I try to print 3 pages as a PDF and enter the printing dialog.
If you'd like to check out the pages directly, click this link. Pressing cmd shift P will open the printing dialog where the issue occurs.
I've gone through debugging to see if any of the elements are causing the problem, but it doesn't seem to be the case. This appears to be a global issue, and I can't figure out what's going wrong.
Here is the code for the print media query:
@media print {
body {
-webkit-print-color-adjust: exact;
}
html, body {
height: auto;
}
.wrap {
padding: 0;
}
.invoice-paper {
page-break-after: auto;
position: relative;
display: block;
padding: 40px;
margin: 0;
width: 210mm;
height: 297mm;
box-shadow: initial;
}
.invoice-paper:last-child {
page-break-after: auto;
}
}
This is the HTML inside the body tag:
<div class="wrap">
<div class="invoice-paper">
<?php include 'components/header.php'; ?>
<?php include 'components/first-tape.php'; ?>
<?php include 'components/second-tape.php'; ?>
<?php include 'components/third-tape.php'; ?>
<?php include 'components/usps.php'; ?>
</div>
<div class="invoice-paper">
<?php include 'components/icp-intro.php'; ?>
<?php include 'components/icp-segment.php'; ?>
<?php include 'components/quote.php'; ?>
<?php include 'components/buyer-persona.php'; ?>
</div>
<div class="invoice-paper">
<?php include 'components/quote-2.php'; ?>
<?php include 'components/graph.php'; ?>
<?php include 'components/quote-inverted.php'; ?>
<?php include 'components/teaser.php'; ?>
</div>
</div>