fix table

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

Hide file tree

Showing 9 changed files with 67 additions and 49 deletions.
diff --git a/CycloRoute/index.html b/CycloRoute/index.html
@@ -161,7 +161,7 @@ <h4>Mode CycloTourisme</h4>
           <li>Télécharger <a class="div-link" href="https://github.com/OsmAnd-Rendering/Cycling/raw/main/CycloRoute.osf">ce fichier</a></li>
         </ul>
         <br>
-        <div class="responsive-columns" style="justify-content: center">
+        <div class="responsive-two-columns">
           <table>
             <thead>
               <tr>

diff --git a/CycloRoute/index_EN.html b/CycloRoute/index_EN.html
@@ -155,7 +155,7 @@ <h2>CycloRoute</h2>
             </ul>
             <br>
 
-            <div class="responsive-columns" style="justify-content: center">
+            <div class="responsive-two-columns">
               <table>
                 <thead>
                   <tr>

diff --git a/CycloRoute/index_ES.html b/CycloRoute/index_ES.html
@@ -156,7 +156,7 @@ <h2>CycloRoute</h2>
             </ul>
             <br>
 
-            <div class="responsive-columns" style="justify-content: center">
+            <div class="responsive-two-columns">
               <table>
                 <thead>
                   <tr>

diff --git a/Enduro/index.html b/Enduro/index.html
@@ -156,7 +156,7 @@ <h2>Enduro</h2>
 
       <br>
 
-      <div class="responsive-columns">
+      <div class="responsive-two-columns">
       <table>
         <thead>
           <tr>

diff --git a/Enduro/index_EN.html b/Enduro/index_EN.html
@@ -157,7 +157,7 @@ <h2>Enduro</h2>
 
         <br>
 
-        <div class="responsive-columns">
+        <div class="responsive-two-columns">
         <table>
           <thead>
             <tr>

diff --git a/Hiking/index.html b/Hiking/index.html
@@ -136,48 +136,48 @@ <h2>Randonnée</h2>
       </ul>
       <br>
 
-      <div class="responsive-columns" style="display: flex; align-items: center; justify-content: center">
-        <div>
-          <table>
-            <thead>
-              <tr>
-                <th><h4>Première installation</h4></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <ul>
-                    <li>Télécharger le fichier <br>
-                    <li>Ouvrir avec OsmAnd<br>
-                    <li> Cocher toutes les cases pour importer le Profil + rendu<br>
-                    <li> Terminé !<br><br>Votre nouveau profil, avec le rendu "Randonnée", est prédéfini.<br>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div>
-          <table>
-            <thead>
-              <tr>
-                <th><h4>Mise à jour du rendu</h4></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <ul>
-                    <li>Télécharger le fichier <br>
-                    <li>Ouvrir avec OsmAnd<br>
-                    <li>Cocher uniquement la case "<strong>Ressources</strong>" pour n'importer que le rendu <br>
-                    <li>Cliquez sur "<strong>Tout remplacer</strong>"<br>
-                    <li>Fait !<br><br>Votre nouveau rendu "Randonnée" a remplacé l'ancien<br>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+      <div class="responsive-two-columns">
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <h4>Première installation</h4>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <ul>
+                  <li>Télécharger le fichier <br>
+                  <li>Ouvrir avec OsmAnd<br>
+                  <li> Cocher toutes les cases pour importer le Profil + rendu<br>
+                  <li> Terminé !<br><br>Votre nouveau profil, avec le rendu "Randonnée", est prédéfini.<br>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <h4>Mise à jour du rendu</h4>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <ul>
+                  <li>Télécharger le fichier <br>
+                  <li>Ouvrir avec OsmAnd<br>
+                  <li>Cocher uniquement la case "<strong>Ressources</strong>" pour n'importer que le rendu <br>
+                  <li>Cliquez sur "<strong>Tout remplacer</strong>"<br>
+                  <li>Fait !<br><br>Votre nouveau rendu "Randonnée" a remplacé l'ancien<br>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
 
 

diff --git a/Hiking/index_EN.html b/Hiking/index_EN.html
@@ -131,7 +131,7 @@ <h2>Hiking</h2>
       </ul>
       <br>
 
-      <div class="responsive-columns">
+      <div class="responsive-two-columns">
       <table>
         <thead>
           <tr>

diff --git a/Hiking/index_ES.html b/Hiking/index_ES.html
@@ -129,7 +129,7 @@ <h2>Senderismo</h2>
       <li>Descargar <a class="div-link" href="https://github.com/OsmAnd-Rendering/Hiking/raw/main/Senderismo.osf">este archivo</a></li>
       </ul>
       <br>
-      <div class="responsive-columns">
+      <div class="responsive-two-columns">
       <table>
       <thead>
         <tr>

diff --git a/Style.css b/Style.css
@@ -425,3 +425,21 @@ div, button {
     width: auto;
   }
 }
+
+/* container */
+.responsive-two-columns {
+  display:flex;
+  flex-wrap:wrap;
+}
+
+/* columns */
+.responsive-two-columns > * {
+  width:100%;
+}
+
+/* tablet breakpoint */
+@media (min-width:768px) {
+  .responsive-two-columns > * {
+      width:50%;
+  }
+}