made svg responsive

static/css/style.css

@@ -1,6 +1,6 @@
 /* Everything*/
 * {
-  border: 0px black solid;
+  border: 1px black solid;
 }
 
 /*Main areas*/
@@ -29,23 +29,23 @@ max-height:500px;
 /* circles */
 
 #first_circle {
-  width: 80%;
-  height: 80%;
+  width: 100%;
+  height: 100%;
 }
 
 #second_circle {
-  width: 80%;
-  height: 80%;
+  width: 100%;
+  height: 100%;
 }
 
-@media all and (max-width: 250px) {
+@media all and (max-width: 350px) {
   #first_circle {
-    width: 4rem;
-    height: 4rem;
+    width: 100%;
+    height: 100%;
   }
   #second_circle {
-    width: 4rem;
-    height: 4rem;
+    width: 100%;
+    height: 100%;
   }
 }
 draggable {

templates/hello.html

@@ -6,19 +6,21 @@
     <!-- <div class="map_area">Map area<div id="circle-1" onclick="scrolldiv()"> -->
     <div class="map_area">Map area
       <div class="row">
-        <div class="col-md-1 col-sm-4">
-
-  <svg id="first_circle">
-    <circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
+        <div class="col-md-2 mx-auto">
+<div id="first_circle">
+  <svg viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="2rem" stroke="black" stroke-width="2" fill="gray" />
     <text x="50" y="50" text-anchor="middle">hello </text>
   </svg>
+</div>
         </div>
-        <div class="col-md-1 col-sm-4">
-
-  <svg id="second_circle">
-    <circle cx="50" cy="50" r='2rem' stroke="red" stroke-width="2" fill="gray" />
+        <div class="col-md-2 mx-auto">
+<div id="second_circle">
+  <svg viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r='2rem' stroke="black" stroke-width="2" fill="gray" />
     <text x="50" y="50" text-anchor="middle">hello boys </text>
   </svg>
+</div>
         </div>