title: Dealing with responsive media queries when printing
body: <p>The issue: <a href="https://output.jsbin.com/donapohuci" rel="nofollow noreferrer">https://output.jsbin.com/donapohuci</a></p>
  
  <p>This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:</p>
  
  <pre><code>div {
    float: left; 
    width: 50%;
  }
  
  @media (max-width:800px) {
    div {
      width: 100%
    }
  }
  </code></pre>
  
  <p>The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.</p>
  
  <p>We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:</p>
  
  <pre><code> @media screen and (max-width:800px)
  </code></pre>
  
  <p>Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)</p>
  
  <p>Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"? </p>
  
  <p>I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."</p>