Print on A5

Hello everyone,
I have a minor problem printing from the web in A5 format.
When I can print my site in A4 landscape, I have no problem, but I need to print in A5 landscape format and then I have a problem with the lines lined under by side instead of side by side. I'm adding images for preview.
Can you help me, please?

I use this code for printing:

var css = '@media print{ @page {  size: landscape } } ',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
style.media = 'print';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
window.print();

This is my web :

This is print for A4 everything is alright:

And this is printing for A5 :frowning:

And here is my CSS for printing .

@media print {
    #button_row {
        display: none;
        margin: 0 !important;
    }
    .ui-button-icon-left,
    .pi-calendar,
    .ui-spinner-button {
        display: none !important;
    }
    .ui-state-active {
        -webkit-print-color-adjust: exact;
    }
    .ui-label-active {
        font-weight: bold !important;
        -webkit-print-color-adjust: exact;
    }
    .box-shadow rz-card .card {
        box-shadow: none;
        border-color: #000000 !important;
    }
    .interruptuion-form input[type=text],
    .interruptuion-form .ui-spinner,
    .interruptuion-form input[type=textarea] {
        border: none !important;
        color: black;
    }
    .page {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    rz-template-form form {
        margin-right: 0px !important;
    }
    #Note {
        border: none !important;
        color: black;
    }
    rz-sidebar {
        display: none;
    }
    rz-header {
        display: none;
    }
    rz-footer {
        visibility: hidden;
    }
    .print-header {
        display: none;
    }
    .printable {
        margin: 0;
    }
    .body {
        margin: 0mm 0mm 0mm 0mm !important;
    }
}

And here is my structure Row and Column :

This looks as some obscure Bootstrap issue on A5 sheet size - it looks as if columns wrap for some reason. Check what their size is and experiment with setting it for multiple devices.

1 Like