Test css

assets/style.css

@@ -207,64 +207,6 @@ ul.navpage_list {
     height: 1.5rem;
 }
 
-@media (max-width: 1050px) {
-
-    div#articleslist {
-        width: 100vw !important;
-        left: 0 !important;
-    }
-
-    #toggle_button {
-        display: flex;
-    }
-
-    #navsite_list {
-        display: none;
-        position: fixed;
-        flex-direction: column;
-        width: 100%;
-        text-align: center;
-    }
-
-    #navsite_list li {
-        text-align: center;
-    }
-
-    .navsite_item {
-        width: inherit;
-    }
-
-    ul.navpage_list {
-        border: 4px solid var(--pico-primary-hover) !important;
-        display: flex !important;
-        max-height: 200px !important;
-        width: inherit;
-        box-sizing: content-box;
-        transition-delay: .1s;
-    }
-    .navsite_item:not(:hover) .navpage_list {
-        transition-delay: .1s;
-        width: inherit;
-    }
-
-    /*noinspection CssUnusedSymbol*/
-    #navsite_list.active {
-        display: flex;
-        -moz-box-shadow: 0 20px 28px 0 var(--dimmer);
-        -webkit-box-shadow: 0 20px 28px 0 var(--dimmer);
-        background-color: var(--dimmer);
-        box-shadow: 0 20px 28px 0 var(--dimmer);
-        top: 80px;
-        text-align: center;
-    }
-
-    nav {
-        flex-direction: column;
-        align-items: center;
-        background-color: var(--dimmer);
-    }
-}
-
 #statusMessageContainer {
     position: fixed;
     top: 80px;
@@ -398,4 +340,76 @@ div#articleslist>article{
 #dynmapa {
     width: 100%;
     height: 100%;
+}
+
+form.form-content {
+    display: flex;
+    flex-direction: row;
+}
+
+div.form-container {
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 1050px) {
+
+    div#articleslist {
+        width: 100vw !important;
+        left: 0 !important;
+    }
+
+    #toggle_button {
+        display: flex;
+    }
+
+    #navsite_list {
+        display: none;
+        position: fixed;
+        flex-direction: column;
+        width: 100%;
+        text-align: center;
+    }
+
+    #navsite_list li {
+        text-align: center;
+    }
+
+    .navsite_item {
+        width: inherit;
+    }
+
+    ul.navpage_list {
+        border: 4px solid var(--pico-primary-hover) !important;
+        display: flex !important;
+        max-height: 200px !important;
+        width: inherit;
+        box-sizing: content-box;
+        transition-delay: .1s;
+    }
+    .navsite_item:not(:hover) .navpage_list {
+        transition-delay: .1s;
+        width: inherit;
+    }
+
+    /*noinspection CssUnusedSymbol*/
+    #navsite_list.active {
+        display: flex;
+        -moz-box-shadow: 0 20px 28px 0 var(--dimmer);
+        -webkit-box-shadow: 0 20px 28px 0 var(--dimmer);
+        background-color: var(--dimmer);
+        box-shadow: 0 20px 28px 0 var(--dimmer);
+        top: 80px;
+        text-align: center;
+    }
+
+    nav {
+        flex-direction: column;
+        align-items: center;
+        background-color: var(--dimmer);
+    }
+
+    form.form-content {
+        flex-direction: column;
+    }
 }