class added to div prints extra pages confusion

Question

I am trying to set a small 5 lines of text part of a webpage that is the middle of my query mobile page as the only printing part of the page, the end goal is to print it on a 62mm x 52mm brother label printer label.

Here's the CSS I have:

@page {
        size: 62mm 52mm;
        margin: 0;
    }
.print:last-child {
     page-break-after: auto;
}

@media print {    
    .no-print, .no-print * {
        display: none !important;
    }
    
    body * {
        visibility: hidden;
    }
    
    .page, .page * {
        visibility: visible;
    }
    
    .page {
        position: absolute;
        left: 0px;
        top: 0px;
        
        display:block;
        margin-right:auto;
        margin-left:auto;
        height: 99%;
        padding: 0;
        transform: rotate(270deg);
    }
}

So in all of the divs I don't want to print I use the class="no-print" class and the part I'm printing I use the class="page" class.

<div class="page" data-role="content" >
                <p align="center"><?php echo $_SESSION['prod_name'];?></p>
                <p align="center">#<?php echo $_SESSION['prod_no'];?></p>
                <p align="center" ><?php echo date("d / m / y",strtotime($_SESSION['date']));?></p>
                <br>
                <p align="center"><?php echo $_SESSION['result1'];?></p>
                <p align="center"><?php echo $_SESSION['result2'];?></p>
</div>

I have tried many different things in order to solve this problem and just when I assumed it was a Jquery Mobile issue I tried something quite random, I applied the class to a paragraph instead of the div, this wanted to print only on one page only instead of the three pages that the div keeps showing.

Is there something really simple I'm missing here? Have I gone the wrong way about this or is this perhaps some kind of known bug using Jquery Mobile?

Despite using the developer tools in a couple of web browsers to try and identify padding or margin issues I am now stuck, this would be great if anyone can help. Thank you.

Answer 1

If you want the extra div's not to be on the print page, in my opinion, add opacity:0 !important; to your code and try again.

 .no-print, .no-print * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden;
  }