Printing like the viewport is on mobile but in reality is on desktop

[nosinformatica]

i would like to print this component that is inside a modal but when i print it gets out like this

this is the function used to print:

<ReactToPrint
    bodyClass="print-agreement"
    content={() => ref.current}
     trigger={() => (
    <Button variant="contained" type="button" style={{ backgroundColor: 'gray', marginLeft: '2%' }} className="">
    <Download width={15} />PDF
        </Button>
    )}
    pageStyle={`@media print {@page {size: 2000x 2000px; margin: 1cm;}`}
 />

the component is inside a modal

<Modal
  isOpen={open}
  toggle={handleClose}
  centered
  size="lg"
  style={{maxWidth: '1100px', width: '100%'}}
  backdropClassName={open ? 'BDModalOpen' : 'BDModalClosed'}
  modalClassName={open ? 'ModalOpen' : 'ModalClosed'}
>
    <Container fluid={true} style={{ padding: '20px' }}>
        <ReactToPrint
            bodyClass="print-agreement"
            content={() => ref.current}
            trigger={() => (
              <Button variant="contained" type="button" style={{ backgroundColor: 'gray', marginLeft: '2%' }} className="">
                <Download width={15} />PDF
              </Button>
            )}
            pageStyle={`@media print {@page {size: 2000x 2000px; margin: 1cm;}`}
          />
          <div ref={ref} ><CsvGraphs data={jsonData} /></div>
    </Container>
</Modal>

[MatthewHerbst]

Hello. Have you checked the styles that your component framework is using? Usually what's happening in cases like this is your framework is using smaller viewport styles when printing.

What component framework are you using?

[nosinformatica]

Hello. Have you checked the styles that your component framework is using? Usually what's happening in cases like this is your framework is using smaller viewport styles when printing.

What component framework are you using?

Hello, thanks, i'm using reactsrap for the row and col and highcharts for the charts, i'm trying to do a codesandbox reproducing the issue and i will post the link to it as soon as i finish it

[nosinformatica]

@MatthewHerbst i just finished the sandbox reproducing the error, try to print and you will see that the cols are in mobile mode: https://codesandbox.io/p/sandbox/wrong-viewport-react-to-print-sandbox-zs4fww?file=%2Fsrc%2FApp.js