Force view-port size for print layout with bootstrap grid

Force view-port size for print layout with bootstrap grid

My page presents a form which 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).

Solutions/Answers:

Solution 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.

Related:  Alternative to x-editable [closed]

Solution 2:

For this, you can use the @media followed by any of these

@media screen, @media print,@media screen, print

By defining the state of any style at the time of paint you can define every rule on @media screen, print which can work for the range in the document.

Like you want to freeze the viewport to 700px then you can define the @media print rule for @media screen,print and (min-width<=760px) { body,html{ min-width:700px;max-width:700px; }}.
which define and set your viewport to a specific point.

Note: This rule can also be used for other work like transform and
zoom as an aspect.

References