Modified CSS to improve responsiveness

webapp/src/main/webapp/css/visualization/capabilitymap/graph.css

@@ -41,19 +41,34 @@ body {
 
 /* Contains all the graphics. */
 #container {
-    /*width: 1200px;*/width:940px;
+    /*width: 1200px;*/
+    max-width:940px;
+    width: 100%;
     height: auto;
-    /* margin:0 auto; */
-    /*margin-left:-130px;*/
     position:relative;
-    /*box-shadow:0px 0px 20px -6px #000000;*/
     margin-top:15px;
+    transition: 0.5s ease all;
+    flex-wrap: wrap;
+
+}
+
+@media (min-width: 1200px) {
+    #container.wide-container {    
+        width: 1200px;
+        max-width: 1200px;
+        margin-left:-130px;
+        margin-right:-130px;
+    }
+
+    #container > #center-container {
+        width: 66%;
+    }
 }
 
 #left-container,
 #right-container,
 #center-container {
-    height:600px;
+    /* height:600px; */
     position:absolute;
     top:0;
 }
@@ -352,4 +367,4 @@ footer {
 footer p.copyright {
     margin-left:0px;
     padding-left:0px;
-}
+}

webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js

@@ -1025,11 +1025,11 @@ var unhide = function() {
     $("#resetButton").removeAttr("disabled");
     if ($(window).width() > 1230) {
         $("#container").css("box-shadow", "0px 0px 20px -6px #000000");
-        $("#container").animate({"height" : "600px", "width" : "1200px", "margin-bottom" : "20px", "margin-left" : (($("#main-content").width() - 1200) / 2) + "px"}, 500);
-        $("#center-container").css("width", "900px");
+        $("#container").animate({"height" : "600px", "width" : "auto", "margin-bottom" : "20px"}, 500);
+        $("#container").addClass("wide-container");
     } else {
-        $("#container").animate({"height" : "600px"});
-        $("#center-container").css("width", "640px");
+        $("#container").animate({"height" : "auto"});
+        // $("#center-container").css("width", "640px");
     }
     $("#helptext").fadeOut();
     $("#center-container").fadeIn();

webapp/src/main/webapp/themes/willow/css/grid.css

@@ -0,0 +1,164 @@
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  width: 100%;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.row {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    /* margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-0.5 * var(--bs-gutter-x));
+    margin-left: calc(-0.5 * var(--bs-gutter-x)); */
+  }
+  .row > * {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    /* padding-right: calc(var(--bs-gutter-x) * 0.5);
+    padding-left: calc(var(--bs-gutter-x) * 0.5); */
+    /* margin-top: var(--bs-gutter-y); */
+  }
+
+.col-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+}
+
+.col-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+}
+
+.col-3 {
+    flex: 0 0 auto;
+    width: 25%;
+}
+
+.col-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+}
+
+.col-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+}
+
+.col-6 {
+    flex: 0 0 auto;
+    width: 50%;
+}
+
+.col-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+}
+
+.col-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+}
+
+.col-9 {
+    flex: 0 0 auto;
+    width: 75%;
+}
+
+.col-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+}
+
+.col-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+}
+
+.col-12 {
+    flex: 0 0 auto;
+    width: 100%;
+}
+
+
+@media (min-width: 768px) {
+    .col-md {
+      flex: 1 0 0%;
+    }
+
+    .col-md-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    .col-md-1 {
+      flex: 0 0 auto;
+      width: 8.33333333%;
+    }
+
+    .col-md-2 {
+      flex: 0 0 auto;
+      width: 16.66666667%;
+    }
+
+    .col-md-3 {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+
+    .col-md-4 {
+      flex: 0 0 auto;
+      width: 33.33333333%;
+    }
+
+    .col-md-5 {
+      flex: 0 0 auto;
+      width: 41.66666667%;
+    }
+
+    .col-md-6 {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+
+    .col-md-7 {
+      flex: 0 0 auto;
+      width: 58.33333333%;
+    }
+
+    .col-md-8 {
+      flex: 0 0 auto;
+      width: 66.66666667%;
+    }
+
+    .col-md-9 {
+      flex: 0 0 auto;
+      width: 75%;
+    }
+
+    .col-md-10 {
+      flex: 0 0 auto;
+      width: 83.33333333%;
+    }
+
+    .col-md-11 {
+      flex: 0 0 auto;
+      width: 91.66666667%;
+    }
+
+    .col-md-12 {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+}

webapp/src/main/webapp/themes/willow/css/screen.css

@@ -23,6 +23,7 @@ VIVO willow theme: screen styles
 @charset "UTF-8";
 
 @import url("reset.css");
+@import url("grid.css");
 @import url("willow.css");
 @import url("page-createAndLink.css");
 @import url("../../../local/css/local.css");