Responsive CSS fixes.

2020-08-17 16:46:13 -07:00
parent ebad54ab82
commit bab70279dd
10 changed files with 57 additions and 29 deletions
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@@ -1,16 +1,16 @@
 .header {
  display: flex;
-  height: 80px;
-}
-
-.header > div {
-  flex: 1;
+  min-height: 100px;
 }

 .title {
  font-size: var(--font-size-large);
 }

+.logo {
+  margin-right: 12px;
+}
+
 .nav {
  list-style: none;
  display: flex;
@@ -24,6 +24,13 @@
  margin-left: 40px;
 }

-.logo {
-  margin-right: 12px;
+@media only screen and (max-width: 768px) {
+  .title {
+    text-align: center;
+  }
+
+  .nav {
+    display: flex;
+    justify-content: space-evenly;
+  }
 }