Make contact page more readable on mobile

1 files changed, 33 insertions, 10 deletions

diff --git a/stylesheets/contact.css b/stylesheets/contact.css
index c62f1c5..afceee6 100644
--- a/stylesheets/contact.css
+++ b/stylesheets/contact.css
@@ -2,6 +2,21 @@ main h1 {
     color: #377d1f;
 }
 
+#contact-us dd {
+    margin-left: 0;
+}
+
+#partners ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding-left: 0;
+}
+#partners ul li {
+    list-style: none;
+    padding: 0 2em;
+}
+
 @media (min-width: 40em) {
     main {
         display: grid;
@@ -28,9 +43,6 @@ main h1 {
     #contact-us dl:not(:last) {
         margin-bottom: 0.2em;
     }
-    #contact-us dd {
-        margin-left: 0;
-    }
     #contact-us dt, #contact-us dd {
         display: inline;
     }
@@ -45,14 +57,25 @@ main h1 {
     }
 
     #partners ul {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
         margin-top: 3em;
-        padding-left: 0;
     }
-    #partners ul li {
-        list-style: none;
-        padding: 0 2em;
+}
+
+@media (max-width: 40em) {
+    main dl, main ul {
+        text-align: center;
+    }
+
+    #contact-us figure {
+        margin: auto;
+        max-width: 80%:
+    }
+
+    #contact-us figure img {
+        max-width: 100%;
+    }
+
+    #partners ul {
+        justify-content: center;
     }
 }