4

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.

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!

Ideally I would like the SVG to scale up and down in size, whilst remaining central, no matter what size the browser is.

This is one of the SVGs that i'm looking to make responsive (right hand side) http://datahealthcheck.databarracks.com/2016/#backup-section-3

I've created a codepen and added just one percentage on the SVG as an example of the problem http://codepen.io/anon/pen/YGvXkq

<div id="Backup-3"></div>
<p id="percentage" class="backup3-percentage">3%</p>

#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);
}

3 Answers 3

5

I'd go with viewport units

.responsive-div {
    position: fixed;
    width: 70vw; // vw being viewport-width, so 70% of the width of the viewport
    height: 50vh; // vh being viewport-height, so 50% of the height of the viewport
}

This article is going more in-depth about it

3
  • Hi @Roberrrt that works great for the SVG but then knocks out all of the percentages surrounding it when it's scaled up and down Oct 12, 2016 at 10:22
  • Ouch, that sounds bad. Could you provide a fiddle/codepen for me to play around with it? You might have to contain the svg in a relative div to make it work again.
    – roberrrt-s
    Oct 12, 2016 at 10:22
  • I've just been trying to get the fiddle to work but for some reason it won't show the svg at all - is it possible for you to have a look at it through inspect element on the live site? datahealthcheck.databarracks.com/2016/#backup-section-3 Oct 12, 2016 at 10:59
1

body{ margin:0; padding:0; 
   }
.mydiv { 
  max-width:1800px; 
  width:100%;
  position:fixed; background:red;  height:100px; border:5px solid green;    box-sizing: border-box;}
<div class="mydiv">
</div>

I think media queries would be the best approach for make the div responsive.

If not you can use with:100% and max-width to your position fixed div

1
  • Hi @Shahil what specifically would you apply that to? Oct 12, 2016 at 9:57
0

max-width dont work with position: fixed. This my alternative:

`.nav{
   width: 1280px;
   position: fixed;
 }
 @media all and (max-width: 1280px) {
   .nav{
    width: 100%;
   }
 }`

if you used width without @media 100% your block

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.