Update Ui - Footer and ContactView.vue (améliorer la réaction lors du scaling)

src/layouts/FooterLayout.vue

@@ -1,20 +1,39 @@
+<!--lg="8" md="10" sm="10" xs="10" -->
+
 <template>
-  <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;">
+  <v-container>
+
+
+    <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
+      class="footer-align">
       <v-container style="background-color: #f4f4f4">
         <v-row justify="center" style="margin-top: 30px;">
-        <v-row cols="auto" class="d-flex justify-center align-center">
+          <v-col cols="5" lg="5" md="5" sm="12" xs="7">
-          <img src="../../../images/hutopy.png" style="height: 70px; margin-right: 2%;">
+            <v-row>
-          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img
+              <v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
-              src="../../../images/facebookiconblackpink.png" alt="Description image 2"
-              style="width: 50px; height: 50px; margin-right: 40px; "></a>
-          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instagramblackpink.png"
-              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px; "></a>
-          <router-link :to="{ name: 'home' }">
-            <img src="../../../images/xblackpink.png" alt="Description image 1"
-              style="width: 50px; height: 50px; margin-right: 40px; "></router-link>
             </v-row>
+          </v-col>
         </v-row>
+      </v-container>
 
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="auto">
+            <a href="https://www.facebook.com/profile.php?id=61556819217561">
+              <img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
+            </a>
+          </v-col>
+          <v-col cols="auto">
+            <a href="https://www.instagram.com/hutopy.inc/">
+              <img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
+            </a>
+          </v-col>
+          <v-col cols="auto">
+            <router-link :to="{ name: 'home' }">
+              <img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
+            </router-link>
+          </v-col>
+        </v-row>
       </v-container>
 
       <v-container class="text-center" style="flex-grow: 1;">
@@ -23,15 +42,15 @@
         </v-btn>
       </v-container>
 
-    <v-container class="text-black text-center">
+      <v-container class="text-black text-center ">
         {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
       </v-container>
 
 
-    <v-container class="custom-footer">
+
-    </v-container>
 
     </div>
+  </v-container>
 </template>
 
 
@@ -52,6 +71,18 @@ export default {
 </script>
 
 <style>
+.icons {
+  width: 50px;
+  height: auto;
+}
+
+.hutopy-footer-picture {
+  height: 70px;
+
+  min-height: 70px;
+  min-width: auto;
+}
+
 .custom-footer {
 
   padding: 10px;
@@ -102,4 +133,39 @@ footer a:not(:last-child) {
 .background {
   background-color: rgba(107, 0, 101, 1);
 }
+
+
+@media (min-width: 150px) and (max-width: 598px) {
+
+  .hutopy-footer-picture {
+
+
+    min-width: 200px;
+  }
+}
+
+@media (min-width: 599px) and (max-width: 999px) {}
+
+@media (min-width: 1000px) and (max-width: 1279px) {}
+
+@media (min-width: 1280px) and (max-width: 1600px) {}
+
+@media (min-width: 1600px) and (max-width: 1919px) {
+  .footer-align {
+    margin-left: 3%;
+  }
+}
+
+@media (min-width: 1920px) and (max-width: 2559px) {
+  .footer-align {
+    margin-left: 14%;
+  }
+}
+
+@media (min-width: 2559px) {
+
+  .footer-align {
+    margin-left: 7%;
+  }
+}
 </style>

src/views/main/ContactView.vue

@@ -4,13 +4,8 @@
   <v-app style="background-color: #F4F4F4;">
 
 
-    <!--lg="8" md="10" sm="10" xs="10" -->
-    <div class="hidden-xs flex-col items-center justify-center">
-
-
-
-
 
+    <div class="hidden-xs flex-col items-center page-margin">
       <v-container>
         <v-row class="text-center align-center row-between-logo-text home-row">
           <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
@@ -198,7 +193,10 @@
 
     </div>
 
+
     <FooterLayout></FooterLayout>
+
+
   </v-app>
 </template>
 
@@ -544,6 +542,10 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     margin-right: -20%;
   }
 
+  .page-margin {
+    margin-left: -9%;
+  }
+
 }
 
 @media (min-width: 2559px) {
@@ -606,5 +608,9 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .paragraph {
     margin-left: 10%;
   }
+
+  .page-margin {
+    margin-left: -5.5%;
+  }
 }
 </style>