Force view-port size for print layout with bootstrap grid

Question

My page presents a form that breaks from horizontal to vertical at @screen-tablet which is around ~ 760px. an A4 page width is around ~600px.

In my print.css I'm shrinking all the text, e.g, font-size:85% so that all default font sized 14 will print at around 12. I also want to display the format and it's horizontal state, meaning - viewport > 760px. Problem is that the print layout sets the page width at A4 ~600px causing the form to display vertically.

Is there any way to "fool" the layout into thinking it's more than 760px?

(I'm hoping for an answer that doesn't require setting a whole new layout for print - just making it look as it would on desktop).

Answer 1

Use the transform property with a media query print type such as:

@media print {   html {     transform: scale(0.8);   } } 

This will allow you to scale the document without reflow of content.

• CODEPEN Example
• transform Functionality Explained