title: Is it possible to make a fixed position div responsive?
body: <p>I have been attempting to make some SVG data charts responsive but seem to be unable to do so with the current CSS 'position:fixed' applied to the elements. </p>
  
  <p>I'm looking for, if possible, a solution that doesn't rely on media queries as I have multiple elements that I would need to apply this to. If this isn't possible, then any suggestions on what to do in order to keep all the data matched up with the SVG as the browser is resized, would be great!</p>
  
  <p>Ideally I would like the SVG to scale up and down in size, whilst remaining central, no matter what size the browser is.</p>
  
  <p>This is one of the SVGs that i'm looking to make responsive (right hand side) 
  <a href="http://datahealthcheck.databarracks.com/2016/#backup-section-3" rel="noreferrer">http://datahealthcheck.databarracks.com/2016/#backup-section-3</a></p>
  
  <p>I've created a codepen and added just one percentage on the SVG as an example of the problem <a href="http://codepen.io/anon/pen/YGvXkq" rel="noreferrer">http://codepen.io/anon/pen/YGvXkq</a></p>
  
  <pre><code>&lt;div id="Backup-3"&gt;&lt;/div&gt;
  &lt;p id="percentage" class="backup3-percentage"&gt;3%&lt;/p&gt;
  
  #Backup-3 {
    position: fixed;
    width: 550px;
    margin-left: 73px;
    margin-top: 31px;
  }
  
  .backup3-percentage {
    position: fixed;
    color: #000;
    margin-left: 478px;
    margin-top: 96px;
    font-size: 1em;
    transform: rotate(6deg);
  }
  </code></pre>