I am working on creating an invoice, the design looks perfect in the browser, but when I try to window.print() the style gets corrupted. I attempted to include @media screen and @media print, but I am still facing the same issue. The invoice form is incorporated into a page with a sidebar and a navigation bar. I also tried creating the invoice form on a separate page with only the form, but the problem persisted. Any assistance would be appreciated.
Browser Image: https://i.sstatic.net/eCuzD.jpg
Print Image: https://i.sstatic.net/zF8fU.jpg
Code:
<html>
<head>
<style type="text/css">
body {
background-color: #000
}
.padding {
padding: 2rem !important
}
...
...
...
</style>
</head>
<body>
...
...
...
</body></html>
...
...
...