add a column for messages

2 files changed, 44 insertions, 1 deletions

diff --git a/static/style.css b/static/style.css
index 867a753..f57b27c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,6 +5,17 @@
 	left: 0px;
 }
 
+@media (min-width: 768px){
+  .container{
+    max-width:90%;
+  }
+}
+
+@media (min-width: 992px){
+  .container{
+    max-width:90%;
+  }
+}
 
 a:link {
     color: #097DC9;
@@ -24,3 +35,21 @@ a:hover {
 a:active {
     color: #097DC9;
 }
+
+* {
+  box-sizing: border-box;
+}
+
+.column {
+  float: left;
+}
+
+.left {
+  width: 80%;
+}
+
+.right {
+  width: 20%;
+}
+
+
diff --git a/templates/cytoscape.html b/templates/cytoscape.html
index e837e0c..98968c8 100644
--- a/templates/cytoscape.html
+++ b/templates/cytoscape.html
@@ -3,7 +3,20 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.6.0/cytoscape.min.js" integrity="sha256-uZV2wRlscgr52q3Wb3Oew0rKCPsM3g4aBTv46sF4qzg=" crossorigin="anonymous"></script>
 
-	<div id="cy"></div>
+
+<div class="row">
+  <div class="column left" >
+
+<h4> {{ message |safe}} </h4>
+  </div>
+
+  <div class="column right">
+
+ {{ message2 |safe}} 
+</div>
+
+
+ <div id="cy"></div>
 	<script>
 		var cy = cytoscape({
 			container: document.getElementById('cy'),
@@ -89,4 +102,5 @@
 		});
     </script>
 
+
 {% endblock %}