fix responsive for sm screens

assets/style/main.scss

@@ -3,6 +3,7 @@
 body {
   font-family: "Barlow", serif;
   font-style: normal;
+  overflow: hidden;
 
   --banner-center-image: 20%;
 }
@@ -29,5 +30,3 @@ body {
 .v-row.center-90 {
   margin: -12px auto;
 }
-
-

components/Common/ActionMenu.vue

@@ -157,6 +157,7 @@ const onActionClick = (action: ActionMenuItem) => {
   display: flex;
   justify-content: center;
   background-color: var(--neutral-color);
+  max-width: 100vw;
 
   .v-btn {
     margin: 6px 2%;

components/Common/Contact.vue

@@ -24,7 +24,7 @@
             Vous avez un projet ?
           </LayoutUITitle>
 
-          <div class="pl-6">
+          <div class="px-6">
             <h6 class="subtitle">
               N'attendez plus, appelez-nous !
             </h6>

components/Home/Help.vue

@@ -137,6 +137,17 @@ ul {
   gap: 9px;
   margin-left: auto;
   margin-right: auto;
+
+  @media (max-width: 1240px) {
+    margin-top: 24px;
+    width: 40%;
+    margin-left: 30%;
+  }
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-left: 5%;
+  }
 }
 
 @media (max-width: 1240px) {
@@ -175,11 +186,5 @@ ul {
     margin-right: auto;
     width: 30rem;
   }
-
-  .button-faq {
-    margin-left: 3rem;
-    margin-top: 2rem;
-    width: 80%;
-  }
 }
 </style>

components/Home/Promotion.vue

@@ -133,6 +133,11 @@ const { mdAndUp } = useDisplay()
   >.v-col {
     margin-bottom: 4rem;
     background: var(--primary-color);
+
+    @media (max-width: 600px) {
+      min-height: 430px;
+      padding: 0 5%;
+    }
   }
 
   .text-block {
@@ -143,6 +148,10 @@ const { mdAndUp } = useDisplay()
     height: 20rem;
     width: 45rem;
     margin: 2rem auto 28rem;
+
+    @media (max-width: 600px) {
+      padding: 0 5%;
+    }
   }
 
   .inline-pic-container {

components/Layout/UI/Title.vue

@@ -21,8 +21,8 @@
     @media (max-width: 600px) {
       font-size: 2rem;
       line-height: 2rem;
-      margin-left: 12px;
-      width: 100%;
+      margin-left: 1.5%;
+      width: 97%;
     }
   }
 </style>

components/Layout/UI/TitlePage.vue

@@ -50,7 +50,6 @@ h2 {
 }
 
 @media (max-width: 600px) {
-
   h1, h2 {
     width: 80%;
     margin: auto

components/Logiciels/Manager/Formation.vue

@@ -82,8 +82,10 @@ const formations: Array<Formation> = [
   margin: 0 auto;
 }
 
-:deep(h2) {
-  width: 60rem;
+@media (min-width: 600px) {
+  :deep(h2) {
+    width: 60rem;
+  }
 }
 
 .background-img {