2 files changed, 45 insertions, 4 deletions
diff --git a/src/static/style.css b/src/static/style.css
index c363de6..ee35cae 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -108,6 +108,50 @@ aside form p {
   flex-direction: row-reverse;
 }
 
+/* Use a media query to add a breakpoint at 800px: */
+@media screen and (max-width: 1200px) {
+  #multicharts ul li {
+    width: 100%;
+    min-height: 500px;
+    height: 100%;
+  }
+
+  aside {
+    float: none;
+    margin: auto;
+    width: 25%;
+    display: block;
+    justify-content: center;
+    text-align: center;
+  }
+
+  #searchform {
+    width: 100%;
+    margin: auto;
+  }
+  
+  aside form input[type="submit"] {
+    margin-top: 3px;
+    margin: auto;
+    background-color: black;
+    color: white;
+    border-radius: 5px;
+    border: 2px solid black;
+  }
+
+  
+input[type="search"] {
+  padding: 3px 5px;
+  box-sizing: border-box;
+  border: 2px solid black;
+  margin: auto;
+}
+
+
+
+  /* input[type="search"] {} */
+}
+
 .minichart {
   min-height: 220px;
   width: 100%;
@@ -125,10 +169,6 @@ aside form p {
   font-size: small;
 }
 
-.chart {
-  
-}
-
 .bottom_text {
   display: inline-flex;
   margin: 0.5rem;
diff --git a/src/templates/template.html.j2 b/src/templates/template.html.j2
index 02da03a..834e798 100644
--- a/src/templates/template.html.j2
+++ b/src/templates/template.html.j2
@@ -1,6 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>UK Gender Pay Gap :: {{ title }}</title>
 	<!-- JQuery and JQurty UI current version -->