From a9bf4714b7bdcb2f6f6c4f7b5db2e69d40c56c63 Mon Sep 17 00:00:00 2001
From: PY <py.dezaunay@gmail.com>
Date: Wed, 25 Sep 2024 09:09:40 +0200
Subject: [PATCH] change aspect ratio on small device

---
 envergo/static/sass/project.scss                   | 9 +++++++++
 envergo/templates/amenagement/moulinette/form.html | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/envergo/static/sass/project.scss b/envergo/static/sass/project.scss
index 25a0c81a4..aea22c5a3 100644
--- 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
index 12f23d34e..bfe2fd4b8 100644
--- 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>