CSS: Improve rules for mobile devices.

1 files changed, 8 insertions, 18 deletions

diff --git a/style.css b/style.css
index ab90869..5249cb8 100644
--- a/style.css
+++ b/style.css
@@ -120,16 +120,16 @@ html, body {
   }
 }
 #map-menu > * {
-  margin-top: .5rem;
+  margin-bottom: .5rem;
   pointer-events: auto;
 }
 @media screen and (max-width: 767px) {
   #map-menu > * {
-    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  .ol-scale-line-inner {
+    font-size: 70%;
   }
-}
-#map-menu > *:first-child {
-  margin-top: 0;
 }
 
 #map-menu > .ol-control {
@@ -190,7 +190,8 @@ html, body {
   /*max-width: 35%;*/
   /*width: revert;*/
   width: 360px;
-  margin-right: 1rem;
+  margin-left: var(--map-container-padding);
+  margin-right: var(--map-container-padding);
   font-size: medium;
   z-index: 0;
   --bs-modal-color: var(--bs-body-color);
@@ -210,13 +211,7 @@ html, body {
   display: block;
 }
 
-@media screen and (max-width: 767px) {
-  #layer-selection-panel,
-  #map-legend-panel {
-    max-width: 100%;
-    margin-right: .5rem;
-    display: none;
-  }
+@media screen and (max-width: 350px) {
   #layer-selection-button,
   #map-legend-button,
   #export-to-image,
@@ -238,11 +233,6 @@ html, body {
     display: none;
   }
 }
-@media screen and (max-width: 900px) {
-  #map-legend-panel, #layer-selection-panel {
-    max-width: 60%;
-  }
-}
 @media screen and (max-height: 300px) {
   body {
     --bs-body-font-size: .8rem;