html - How to make html tags responsive to layout size adjustments?

Question

I probably have too much of content here for what I am trying to do. I basically just want to make my layout constraints to carry over to varying window sizes. Unfortunately, the layout doesn't carry over and certain HTML tags are cut off on smaller screens. How do I make the layout consistent across all screen sizes?

For reference, the layout of the page should look like this:

 ----------------------------------------
|  [div 1]                               |
|                                        |
|                                        |
|                ----------              |
|                |   svg  |              |
|                ----------              |
|                                        |
|  [button1]                  [button2]  | 
-----------------------------------------

The SVG has a border and uses a viewBox to allow the SVG to adjust sizing appropriately. However, this is a CSS and HTML issue as my other controls are not responsive.

This is probably very trivial but I think the viewBox might be affecting the HTML tags.

This is my HTML:

#radioToggle {
  position: fixed;
  margin-top: -20px;
  margin-bottom: 20px;
  background: white;
}

#buttonOneDiv {
  position: fixed;
  padding: 20px;
  bottom: 0;
}

#buttonTwoDiv {
  position: fixed;
  padding: 20px;
  bottom: 0;
  right: 0;
}

#container {}

#tree {
  text-align: center;
}

svg {
  border: solid 2px black;
  margin-top: 50px;
  margin-bottom: 100px;
}

<div id="radioToggle"></div>
<!-- this is div1 -->
<div id="container">
  <!-- container hosting the div that hosts the SVG-->
  <div id="tree"></div>
</div>
<div id="buttonOneDiv">
  <button type="button" class="btn btn-secondary">Back</button>
</div>
<div id="buttonTwoDiv">
  <button type="button" class="btn btn-secondary" id="collapse">Forward</button>
</div>

For additional reference, here is my SVG:

let svg = d3.select("#tree")
.append("svg")
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " 
+ (height + margin.top + margin.bottom))

标签： htmlcssd3.jssvg