quatuorbellefeuille.com

commit a6f16045ddf2b77928fc40eea88aaa00a95ade8d
parent e7c9dada33fad3473528f1d7ffa3c4ac26e2b9a8
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun,  7 Mar 2021 18:46:30 +0100

Make contact page more readable on mobile

Diffstat:
M
stylesheets/contact.css
 | 
43
+++++++++++++++++++++++++++++++++----------

1 file changed, 33 insertions(+), 10 deletions(-)
diff --git 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;
     }
 }