React-to-print: Responsive design printed

[AJTJ]

Hi, I'm building a project using reactstrap/bootstrap and I have my inner components set to be full-width at certain browser widths <Col xs={12} sm={12} md={6} lg={6}>...

Unfortunately, react-to-print is choosing to print the components at full-width, which I do not want, since they fit nicely at half-width.

How do you compensate for responsive components? Can I request it print as if the browser were at max-width?

[Ryan-Hancock]

I am currently having to create my own flex boxed components as the same issue is occurring for me.

[Richi2293]

Yes it doesn't work well also for me with bootstrap components.

---

I solved by transforming the components, example:

<Col md="4"> ---> <div className="col" md="4">

[MatthewHerbst]

Have you looked into the CSS @page property? You might be able to solve your issues with that

[MatthewHerbst]

@AJTJ were you able to solve your issue here?