Print css not working

HTML & CSS
1

So I did this, I put a hidden iframe on the page. And print from there. The problem is even loading the hidden page diorectly I still can not control the print size. Even loading this page directly causes it to print postage stamp size and ignores margins.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@media screen
{
   @page
   {


    width: 70%;

  }

img {
    max-width: 70%
}
}

@media print
{
   @page
   {
    size: letter portrait; !important;
    margin: 0.5cm  0.5cm  0.5cm  0.5cm !important;
    padding: 0 !important;

    }

   body  
    { 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px !important;
    }

    html
    {
        background-color: #FFFFFF !important;
        margin: 0px !important;  /* this affects the margin on the html before sending to printer */
    }



img {
    width: 7.86cm !important;
    height: 7.66cm !important;
}


}

</style>
</head>
<body>

<img src ='filemanager/userfiles/Scan1523901058.jpg'/>


 <script type="text/javascript">
      window.onload = function() { window.print(); }
 </script>
</body>

</html>
3

A post was merged into an existing topic: Need help with some CSS print and screen