fix: style for issue 372

src/components/banner-card/banner-card.less

@@ -1,6 +1,8 @@
 @import url(../../App.less);
 
-// Start Temporary styles for list types. Not final yet. 
+@mobile-l-detection: ~" screen and (min-width: 426px) ";
+
+// Start Temporary styles for list types. Not final yet.
 
 .list-style-background() {
   content: " ";
@@ -137,6 +139,10 @@
   position: relative;
   display: flex;
 
+  @media only @mobile-l-detection {
+    height: 200px;
+  }
+
   .offline-overlay{
     font-size: 24px;
     line-height: 18px;
@@ -152,8 +158,8 @@
     flex-direction: column;
     justify-content: center;
 
-    pointer-events: none;    
-    
+    pointer-events: none;
+
    .offline-overlay-line {
       justify-content: center;
       align-items: center;
@@ -255,7 +261,7 @@
 }
 
 
-// Support for browsers that don't support aspect-ratio yet. 
+// Support for browsers that don't support aspect-ratio yet.
 // Can be removed once this feature is implemented in all major browsers
 
 @supports (aspect-ratio: 1/1) {

src/mobile.less

@@ -1,11 +1,10 @@
+@mobile-detection: ~" screen and (max-width: 880px) ";
+@mobile-xs-detection: ~" screen and (max-width: 321px) ";
+
 .bottom-menu {
   display: none;
 }
 
-@mobile-detection: ~" screen and (max-width: 880px) ";
-@mobile-xs-detection: ~" screen and (max-width: 321px) ";
-@mobile-l-detection: ~" screen and (min-width: 426px) ";
-
 @media only @mobile-xs-detection {
   .banner-list {
     justify-content: center;
@@ -15,12 +14,6 @@
   }
 }
 
-@media only @mobile-l-detection {
-  .banner-card-picture-container {
-    height: 200px;
-  }
-}
-
 @media only @mobile-detection {
   .hide-on-mobile {
     display: none !important;
@@ -120,7 +113,7 @@
     .menu-main {
       a {
         flex: 1;
-        min-width: 0 !important;      
+        min-width: 0 !important;
       }
     }
   }
@@ -129,13 +122,6 @@
     display: none;
   }
 
-  .map-explorer {
-    width: 100% !important;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
   .banner-card-picture {
     height: auto;
     aspect-ratio: 2;

src/pages/map-overview/map.less

@@ -1,3 +1,5 @@
+@mobile-detection: ~" screen and (max-width: 880px) ";
+
 .map-overview {
   height: 100%;
   overflow: hidden;
@@ -12,6 +14,13 @@
   }
 
   .map-explorer {
-    width: calc(100% - 420px)
+    width: calc(100% - 420px);
+
+    @media only @mobile-detection {
+      width: 100% !important;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
   }
-}
+}