diff --git a/genome-vuer/src/index.html b/genome-vuer/src/index.html
index fcd1d64e69eaf6d36c9b2f3f6cdd00e88e8a74b0..a0710aba5f6536e93f1d430d31a9d8540e6edfcc 100644
--- a/genome-vuer/src/index.html
+++ b/genome-vuer/src/index.html
@@ -14,7 +14,7 @@
 </head>
 
 <body>
-<div id="app">
+<div id="app" style="height:300px">
   <genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer>
 </div>
   <script src="js/axis.js"></script>
diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js
index 377c5c0d04f658ae3c3e6eaa2af3d7d074296dd8..2b1f3f2eb702a8953ac243e05301306c18407b03 100644
--- a/genome-vuer/src/js/genome_viewer.js
+++ b/genome-vuer/src/js/genome_viewer.js
@@ -1,6 +1,6 @@
 Vue.component("genome-viewer",{
   template: `
-    <div>
+    <div style="height:100%;width:100%">
       <!--<div class="container-lin-dna">
         <div :id="genomeStats.id" class="lin-dna" :data-cluster-start="genomeStats.start" :data-cluster-end="genomeStats.end" style="width: 100%; height: 50px;">
           <div v-for="feature in featureData" :key="feature.name" class="region-to-display" :data-region-name="feature.name" :data-region-description="feature.description" :data-region-start="feature.start" :data-region-end="feature.end" :data-region-strand="feature.strand" :data-region-type="feature.type">
@@ -10,7 +10,7 @@ Vue.component("genome-viewer",{
       -->
       <svg id="genome-vuer" ref="genomeVuer" height='100%' width='100%'> 
       <!-- -->
-        <axis :x="to_w(0)" :y="to_h(0)" :xOffset="10" :vOffset="10" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
+        <axis :x="to_w(0)" :y="to_h(0)" :vOffset="height/15" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
         </axis>
         <!-- -->
         <lane v-for="lane in lanes" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="2*one_height" :width="to_w(100)">
@@ -116,7 +116,20 @@ Vue.component("genome-viewer",{
       //this.one_height = this.height/(1 + 2 * this.lanes.length)
     
     },
+  created(){
+    window.addEventListener('resize', this.handleResize, false);
+  },
+  destroyed(){
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods:{
+    handleResize(){
+      var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
+      this.width = svg_el.width
+      this.height = svg_el.height
+      //#this.width = window.innerWidth;
+      //#this.height = window.innerHeight;
+    },
     getColor(feature){
       if(feature.hasOwnProperty("color")){
         return feature.color
