Mobile setup for "explorer" page on configurer

styles/main.css

@@ -340,15 +340,15 @@ article.explorer h2 {
     cursor:pointer;
 }
 
-article.explorer h2 span::before {
-    content: "▼︎";
-    display: inline-block;
-    position: absolute;
+article.explorer h2::after {
+    content:"▼︎";
+    display:inline-block;
+    position:absolute;
     transition:transform .2s ease;
     transform:rotate(-90deg);
 }
 
-article.explorer h2.active span::before {
+article.explorer h2.active::after {
     transform:rotate(0);
 }
 
@@ -361,11 +361,11 @@ article.explorer form h3, article.explorer form span {
 }
 
 article.explorer form .container {
-    max-width:80vw;
+    /*max-width:80vw;*/
     margin:auto;
     display:flex;
     align-self:flex-start;
-    justify-content:space-evenly;
+    justify-content:space-around;
     flex-wrap:wrap;
 }
 
@@ -375,7 +375,12 @@ article.explorer form {
 
 article.explorer form select {
     display:block;
-    margin-right:1rem;
+    margin-right:0.75rem;
+}
+
+/* does not seem to work */
+article.explorer form .box {
+    margin:1rem;
 }
 
 article.explorer input[type = submit] {
@@ -393,6 +398,40 @@ article.explorer input[type = submit] {
     color:white;
 }
 
+@media only screen and (max-width:600px) {
+    article.explorer form .container {
+        display:block;
+    }
+
+    article.explorer form .container .box span {
+        display:block;
+        margin-left:1rem;
+        font-size:1.05rem;
+    }
+
+    article.explorer form .container h3 {
+        cursor:pointer;
+    }
+
+    article.explorer form .container h3::after{
+        content:"▼︎";
+        display:inline-block;
+        position:absolute;
+        transition:transform .2s ease;
+        transform:rotate(-90deg);
+    }
+
+    article.explorer form .container .box.active h3::after {
+        transform:rotate(0);
+    }
+}
+
+@media only screen and (max-width:1200px) {
+    article.explorer form .container {
+        justify-content:left;
+    }
+}
+
 article.explorer p.no-result {
     text-align:center;
     font-size:1.2rem;
@@ -407,7 +446,7 @@ article.explorer table {
     width:100%;
     margin-top:1rem;
     margin-bottom:1rem;
-    overflow-x:auto;
+    overflow-x:scroll;
 }
 
 article.explorer table tr:first-child th:first-child {
@@ -440,7 +479,7 @@ article.explorer td, article.explorer th {
 
 article.explorer th {
     border-top:1px solid #bbb;
-    background:#dddddd;
+    background:#ddd;
     position:sticky;
     top:0;
 }