Media print issue in in portrait mode

Question

I have this form, which i print in order to do my work.

Now, the issue is, in the portrait mode, it gets minimized, i mean it looks small, like half of the page of an A4 Letter, while in landscape mode it looks just fine.

Here is my media print css:

@media print  {
textarea{
        border:none;
    }
textarea#difekti {
padding-bottom:40px;
border:none;
    }
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
    display: block;

}
#tab1 table, td, th {
  border: 1px solid red;   
}

#tab1 thead {
  float: left;   
}


#tab1 thead th {
  display: block;   
  background: yellow;
}

#tab1 tbody {
  float: right;   
}
#programi {
    display:none;
}
#kursor {
    display:none;
}
#adresa { }
* {position:static !important;}

}

Any suggestion? Besides, i have issues with IE too. Can i create an additional media print for IE? Thanks

Answer 1

You should change this to a separate CSS file and link it to your HTML document using media="print" at the bottom most of any CSS link.

<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />

This will also help you avoid the issue with IE.

Answer 2

The @page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

@page { size:5.5in 10in; margin: 1cm }

Answer 3

@media print and (orientation: portrait) { styles here }

@media print and (orientation: landscape) { styles here }