title: Responsive A4 css code
body: <p>From <a href="https://stackoverflow.com/questions/20446252/stretch-div-to-a4-size">this question</a> I got a very nice code to render an A4 sheet onto my web app. I adapted it to fill up my needs. Here is the code snippet :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.book {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
  }
  
  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  
  .page {
    display: block;
    width: 21cm;
    height: 29.7cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
  
  .subpage {
    margin: 1cm;
    width: 19cm;
    height: 27.7cm;
    outline: 0cm #FAFAFA solid;
  }
  
  @page {
    size: A4;
    margin: 0;
  }
  
  @media print {
    .page {
      margin: 0;
      border: initial;
      border-radius: initial;
      width: initial;
      min-height: initial;
      box-shadow: initial;
      background: initial;
      page-break-after: always;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div class="book"&gt;
      &lt;div class="page"&gt;
        HEADER
        &lt;div class="subpage" id='editor-container'&gt;CONTENT&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code is very nicely rendering what I want to do on a <strong>computer screen</strong>. But when you use it on a small-sized screen, for example a tablet, this isn't very convenient.</p>
  
  <p>How can I make this code responsive to suits the screen where it would be displayed ?</p>
  
  <p>Basically, it would be nice if the sheet resizing to be entirely displayed on the screen, or at least from the left to the right side and users could scrolldown to display the content from the top to the bottom.</p>