Finalisation aPropos.html + CSS

www/css/style.css

@@ -45,30 +45,6 @@
 
 /** FIN DE SECTION modifier par script  **/
 
-.sidebyside {
-    display: flex;
-}
-
-.colonne {
-    flex: 1;
-}
-
-/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
-.col-container {
-    display: table;
-}
-
-.col {
-    display: table-cell;
-    /* Make elements inside the container behave like table cells */
-}
-
-.centered {
-    text-align: center;
-    margin: auto;
-    display: block;
-}
-
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -312,6 +288,33 @@ footer a:hover {
     display: block;
 }
 
+.aPropos .sidebyside {
+    display: flex;
+    max-width: 100%;
+}
+
+.aPropos .sidebyside section.commentaire,
+.aPropos .sidebyside section.coordonnees {
+    width: 50%;
+    margin: 16px;
+}
+
+/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
+.aPropos .col-container {
+    display: table;
+}
+
+.aPropos .col {
+    display: table-cell;
+    /* Make elements inside the container behave like table cells */
+}
+
+.aPropos .centered {
+    text-align: center;
+    margin: auto;
+    display: block;
+}
+
 .aPropos h1 {
     text-align: center;
 }
@@ -331,35 +334,19 @@ footer a:hover {
     padding: 1em;
 }
 
-
-.aPropos .sidebyside>div {
-    margin: 5px 20px;
-}
-
-.aPropos .sidebyside>h2 {
-    width: 100%;
-
-}
-
 .aPropos textarea {
     resize: none;
     width: 100%;
 }
 
-
 .aPropos form {
-    width: 70ch;
+    width: 100%;
+    height: 100%;
     margin: auto;
     background-color: #726F9A;
     border-radius: 20px;
-    padding: 1em;
+    padding: 16px;
     color: #E6ECF3;
-    overflow: none;
-
-}
-
-.aPropos .sidebyside>div {
-    height: 100%;
 }
 
 .aPropos p {
@@ -371,6 +358,7 @@ footer a:hover {
     padding: 1em;
     border-radius: 20px;
     color: #E6ECF3;
+    width: 100%;
 }
 
 .aPropos .grille {
@@ -423,7 +411,6 @@ footer a:hover {
     text-align: right;
 }
 
-
 .aPropos .grille #contenuAdresse,
 .aPropos .grille #contenuInfo,
 .aPropos .grille #contenuTelephone,
@@ -440,23 +427,26 @@ footer a:hover {
     color: #c19f8a;
 }
 
-
 /* Hide scrollbar for Chrome, Safari and Opera */
 .conteneurMaps::-webkit-scrollbar {
- display: none;
+    display: none;
 }
+
 /* Hide scrollbar for IE, Edge and Firefox */
 .conteneurMaps {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-  padding:0;
-  margin: auto;
-  width: 100%;
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+    padding: 0;
+    margin: auto;
+    width: 100%;
 }
+
 .aPropos #mapsFrame {
     border-radius: 20px;
     width: 100%;
-    height: 500px;
+    height: 400px;
 }
 
 .aPropos .sidebyside label {
@@ -478,20 +468,16 @@ footer a:hover {
     margin-bottom: 1em;
 }
 
-.aPropos #firstField label {
+.aPropos #infoContact label {
     width: 11em;
     display: inline-block
 }
 
-.aPropos #firstField input {
+.aPropos #infoContact input {
     width: 25em;
     display: inline-block
 }
 
-/*.aPropos div {*/
-/*    display: block; */
-/*}*/
-
 /****************************/
 /* PAGE: L'équipe */
 /* AUTEUR: Jérémy Hébert */