how to style content of div on printing page using javascript/jquery?

Question

I need to print content of a web page. There is a print button below div

<div class="printing-content">
</div>
<button class="btn -primary mr-1" onclick="window.print()"><span class="mdi mdi-printer"></span> Print</button>

my web page looks like:

On print

here is my css

 @media print {
        body * {
            visibility: hidden;
        }

    .printing-content * {
        visibility: visible;
        -webkit-print-color-adjust: exact;
    }
    .printing-content {
        /* position: absolute; */
        width: 100%;
        left: 0;
        top: 0;
    }
}

i need to show div with full width on printed page. Thanks in advance.

Answer 1

You could try using a media query and setting the size of the page to landscape?

@media print{@page {size: landscape}}

For the div itself you can play around with the width and height of the div when it is printed also using a media query.

@media print { 
  .printing-content {
     width: 210mm;
     height: 297mm;
  }
}

Try play around with those width and height values.