change aspect ratio on small device

MTES-MCT · Sep 25, 2024 · a9bf471 · a9bf471
1 parent 3bddf14
commit a9bf471
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/envergo/static/sass/project.scss b/envergo/static/sass/project.scss
@@ -1816,6 +1816,15 @@ main.demonstrateur_2150 {
 
     #moulinette {
       max-width: 650px;
+
+      @media (width < 20em) {
+        #map-container {
+          &::before {
+            // switch from ratio 16x9 to ratio 4x3 when width < 320px/20em
+            padding-bottom: 75%;
+          }
+        }
+      }
     }
   }
 

diff --git a/envergo/templates/amenagement/moulinette/form.html b/envergo/templates/amenagement/moulinette/form.html
@@ -25,7 +25,7 @@
         l'emplacement du projet.
       </label>
       <figure class="fr-content-media">
-        <div id="map-container" class="ratio-4x3 fr-mt-1w fr-mb-2w fr-raw-link">
+        <div id="map-container" class="ratio-16x9 fr-mt-1w fr-mb-2w fr-raw-link">
           <div class="ratio-content">
             <div class="leaflet-container">
               <div id="map"></div>