Force a web page print to a higher resolution

Question

I have a web page that uses bootstrap 3 css and when a user print the page, it always seem to take the small or x-small layout, making controls really bigs and on different lines. I am ok with the page layout being that way on xs layout because it does make sens on a small screen, but it doesn't on paper.

I am not really good in css in general, but I was wondering if there is any way to force the printing so that the printed version look like the "md" version or even bigger ?

EDIT : Just to make sure I explain correctly, here is the page on a big screen

And here the printed version :

Is there anyway way to make the printed version bigger in term of width ? If this is possible, the controls will indeed be smaller but better stacked, which is what I am aiming at.

Answer 1

If you want to do this with css only:

@media print
{
  /*whatver css you need here*/
}

The @media rule allows you to specify a different style for different media.

But another approach it to add a print button to the site that uses javascript to open the print dialogue. Then based on that click event you can make changes to the page/ show a printer friendly version.

additional css approach: add a css stylesheet specifically for printing

<link rel="stylesheet" media="print" href="print.css">

Copy your regular stylesheet into print.css and change all the fonts to print friendly ones. This is better than option 1 because it sounds like you want to override a lot of settings and !important is bad practice.