diff --git a/envergo/static/sass/project.scss b/envergo/static/sass/project.scss
index e2f0bfb46..126e9e16b 100644
--- a/envergo/static/sass/project.scss
+++ b/envergo/static/sass/project.scss
@@ -1827,6 +1827,15 @@ main.demonstrateur_2150 {
     #moulinette,
     #triage {
       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>