fix legend cycloroure

OsmAnd-Rendering · Jun 23, 2024 · bfc86f1 · bfc86f1
1 parent dc403d4
commit bfc86f1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/CycloRoute/index.html b/CycloRoute/index.html
@@ -228,7 +228,7 @@ <h4>Mode CycloTourisme</h4>
         <h4>Legende du fond de carte CyclOSM que nous avons intégré à notre style</h4>
         <br>
 
-        <div class="responsive-columns" style="justify-content: center">
+        <div class="responsive-three-columns">
           <table>
             <tr>
               <td colspan=2 align="center">
@@ -282,7 +282,6 @@ <h4>Infrastructure cyclable</h4>
             <tr>
             </tr>
           </table>
-          <br>
 
           <table>
             <tr>
@@ -341,7 +340,7 @@ <h4>Véloroute</h4>
               <td>Itinéraire VTT</td>
             </tr>
           </table>
-          <br>
+
           <table>
             <tr>
               <td colspan=2 align="center">

diff --git a/CycloRoute/index_EN.html b/CycloRoute/index_EN.html
@@ -231,7 +231,7 @@ <h4>If you want to use it for cyclotourism<h4>
             <h4>Legend of the CyclOSM basemap that we integrated into our style</h4>
             <br>
 
-            <div class="responsive-columns" style="justify-content: center">       
+            <div class="responsive-three-columns">       
                 <table>
                   <tr>
                     <td colspan=2 align="center">
@@ -285,7 +285,6 @@ <h4>Cycling infrastructure</h4>
                   <tr>
                   </tr>
                 </table>
-                <br>
 
                 <table>
                   <tr>
@@ -344,7 +343,6 @@ <h4>Cycle routes</h4>
                     <td>MTB route</td>
                   </tr>
                 </table>
-                <br>
 
                 <table>
                   <tr>

diff --git a/CycloRoute/index_ES.html b/CycloRoute/index_ES.html
@@ -233,7 +233,7 @@ <h4>Si quieres usarlo para cicloturismo</h4>
             <h4>Leyenda del mapa base de CyclOSM que integramos a nuestro estilo</h4>
             <br>
 
-            <div class="responsive-columns" style="justify-content: center">
+            <div class="responsive-three-columns">
                 <table>
                   <tr>
                     <td colspan=2 align="center">
@@ -287,7 +287,6 @@ <h4>Infraestructura ciclista</h4>
                   <tr>
                   </tr>
                 </table>
-                <br>
 
                 <table>
                   <tr>
@@ -346,7 +345,6 @@ <h4>Rutas ciclistas</h4>
                     <td>Ruta BTT</td>
                   </tr>
                 </table>
-                <br>
 
                 <table>
                   <tr>

diff --git a/Style.css b/Style.css
@@ -442,4 +442,22 @@ div, button {
   .responsive-two-columns > * {
       width:50%;
   }
+}
+
+/* container */
+.responsive-three-columns {
+  display:flex;
+  flex-wrap:wrap;
+}
+
+/* columns */
+.responsive-three-columns > * {
+  width:100%;
+}
+
+/* tablet breakpoint */
+@media (min-width:850px) {
+  .responsive-three-columns > * {
+      width:calc(100% / 3);
+  }
 }