adding the meta viewport tag means more css elements need to be adjusted; leaving this for when there is more time

themes/default/static/css/main.css

@@ -227,8 +227,6 @@ p {
 	word-break: break-word;
 }
 
-
-/* Layout phone */
 @media (max-width:770px) {
 	nav#menu li {
 		width: 50vw;
@@ -247,7 +245,6 @@ p {
 
 }
 
-/* Layout tablet */
 @media (max-width:1024px) {
 	body {
 		margin-left: 13vw;
@@ -256,4 +253,32 @@ p {
 		nav#menu li {
 			height: 14vw;
 		}
+} */
+
+/* @media (max-width:770px) {
+	nav#menu li {
+		width: 50vw;
+		height: 24vw;
+		font-size: 2em;
+		margin: 1em 0.1em;
+	}
+
+	header#banner h1 {
+		font-size: 10vw;
+	}
+
+	body{
+		margin-left: 9.4vw;
+	}
+
 }
+
+@media (max-width:1024px) {
+	body {
+		margin-left: 13vw;
+	}
+
+		nav#menu li {
+			height: 14vw;
+		}
+} */

themes/default/templates/base.html

@@ -6,6 +6,7 @@
 	<meta charset="utf-8" />
 	<meta name="generator" content="Pelican" />
 	<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
+	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
 	{% endblock head %}
 </head>