On desktop (both Windows and Mac), the print preview displays correctly. However, on iOS devices, the full width is not shown and there is some blank space above.
The issue I'm facing is that I cannot debug this problem using Browserstack. I am restricted to debugging only in the desktop rendering option
This is a snippet of my code:
@media print {
body {
-webkit-print-color-adjust: exact;
width: 100%;
max-width: 100% !important;
padding-right: 0 !important;
padding-left: 0 !important;
margin: 0 auto !important;
}
.cssr-print {
display: block;
visibility: visible;
margin-top: 0px !important;
margin-bottom: 0px !important;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background-color: @white;
padding: 50px 0 0;
max-width: 100%;
text-align: center;
width: 100%;
}
}
<div class='cssr-print'>
.....
</div>