multiple page in mobile device

[samirahosseini937]

i use this style

@media print {
  /* Hide all elements except the certificate */
  body * {
    visibility: hidden; /* Hide all elements */
    page-break-inside: avoid; /* Prevent breaking inside */
  }

  /* Show only the certificate */
  .certificate {
    visibility: visible;
    page-break-inside: avoid; /* Prevent breaking inside */
  }

  /* Ensure all children of the certificate are visible */
  .certificate * {
    visibility: visible;
  }
}

and print with

  const handlePrint = useReactToPrint({
    contentRef: certificateRef as React.MutableRefObject<HTMLElement>,
  });

why in mobile device create 5 page instead of one page

[MatthewHerbst]

Hello. Hard to debug without seeing more code. You also didn't say if it's working properly on desktop devices? Any chance you could make a Codesandbox or similar?

[samirahosseini937]

In your CodeSandbox, the PDF creator shows the header on mobile

Preview - nodebox - CodeSandbox.PDF