diff --git a/index.html b/index.html
index b577985..0e3cc20 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,62 @@
 <link href="assets/css/theme.min.css" type="text/css" rel="stylesheet">
 <link href="assets/css/custom.css" type="text/css" rel="stylesheet">
 <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v7.1.0/css/all.css"/>
+<style>
+@media (max-width: 768px) {
+
+    /* Remove fixed height on columns */
+    .column[style*="height"] {
+        height: auto !important;
+        padding-top: 10px !important;
+        justify-content: center !important;
+    }
+
+    /* Hide all menus */
+    .navbar-section.desktop-menu,
+    .mobile-menu,
+    .mobile-container {
+        display: none !important;
+        visibility: hidden !important;
+        height: 0 !important;
+        overflow: hidden !important;
+    }
+
+    /* Navbar container flexible */
+    .navbar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 5px 0;
+        box-sizing: border-box;
+        height: auto !important; /* remove any fixed height */
+    }
+
+    /* Logo container full width, centered */
+    .navbar-section.logo {
+        width: 100%;
+        text-align: center;
+        padding: 0;
+        margin: 0 auto;
+    }
+
+    /* Scale logo image to fit */
+    .navbar-section.logo img {
+        max-width: 90%;     /* scale horizontally */
+        max-height: 6.5vh;  /* scale vertically relative to viewport height */
+        width: auto;
+        height: auto;
+        display: block;
+    }
+
+    /* Hide all other navbar sections */
+    .navbar-section:not(.logo) {
+        display: none !important;
+    }
+
+}
+</style>
 <script src="assets/js/jquery-3.x.min.js"></script>
 <script src="assets/js/underscore-min.js"></script>
 <script src="assets/js/raphael-min.js"></script>