fix responsive errors for md screens (index and soft pages)

components/Common/Banner.vue

@@ -77,7 +77,8 @@ const props = defineProps({
 .banner-container {
   position: relative;
   overflow: hidden;
-
+  min-height: 400px;
+  max-height: 400px;
   .image-text {
     position: absolute;
     top: 40px;

components/Common/Contact.vue

@@ -15,7 +15,7 @@
           />
         </v-col>
 
-        <v-col cols="12" lg="5">
+        <v-col cols="12" lg="5" class="contact-section">
           <LayoutUISubTitle v-if="mdAndUp">
             Contactez-nous
           </LayoutUISubTitle>
@@ -43,7 +43,7 @@
       </v-row>
 
       <!-- Section "Adhérent CMF" -->
-      <v-row class="center-90" >
+      <v-row class="center-90 cmf-section" >
         <v-col cols="12" lg="6" >
           <LayoutUISubTitle>
             Adhérents CMF
@@ -58,7 +58,7 @@
               N'attendez plus, appelez-nous
             </h6>
 
-            <p class="contact-details mr-12">
+            <p class="contact-details">
               Si votre établissement d’enseignement artistique est adhérent à la
               Confédération Musicale de France (CMF), vous bénéficiez
               gratuitement, dans le cadre de votre adhésion, de la version
@@ -114,8 +114,8 @@ const { smAndDown, mdAndUp } = useDisplay()
   width: 80%;
   height: 100%;
 
-  @media (max-width: 600px) {
-    margin: 0 auto !important;
+  @media (max-width: 1240px) {
+    margin: 12px auto 48px auto !important;
   }
 }
 
@@ -144,6 +144,21 @@ const { smAndDown, mdAndUp } = useDisplay()
   line-height: 20px;
   color: var(--on-neutral-color);
   text-align: justify;
+  max-width: 80%;
+}
+
+@media (max-width: 1240px) {
+  .contact-section {
+    text-align: center;
+  }
+
+  .cmf-section {
+    text-align: center;
+  }
+
+  .contact-details {
+    margin: 0 auto;
+  }
 }
 
 @media (max-width: 1600px) and (min-width: 600px) {

components/Common/ReviewSection.vue

@@ -7,7 +7,7 @@
               Ce sont eux qui en parlent le mieux
             </h3>
 
-            <div v-if="lgAndUp" class="carousel-controls">
+            <div class="carousel-controls">
               <v-btn
                 icon="fas fa-chevron-left"
                 @click="goPrevious"
@@ -26,7 +26,7 @@
             :items-to-show="lgAndUp ? 3 : 1"
             :wrapAround="true"
             :show-arrows="false"
-            height="350"
+            snapAlign="center"
             class="carousel"
           >
             <Slide
@@ -130,10 +130,19 @@ const goNext = () => {
     margin-right: 1rem;
     margin-bottom: 2rem;
     border-radius: 0;
+
+    @media (max-width: 1240px) {
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+    }
   }
 }
 
 .carousel {
+  @media (max-width: 1240px) {
+    left: -36px;
+  }
+
   .v-card {
     display: flex;
     flex-direction: column;
@@ -145,9 +154,8 @@ const goNext = () => {
     margin-bottom: 0.6rem;
 
     @media (max-width: 1240px) {
-      min-height: 120px;
       max-width: 70%;
-      margin: 0 auto;
+      margin: 0 auto 48px auto;
     }
   }
 
@@ -222,8 +230,8 @@ const goNext = () => {
   border-radius: 1rem;
 
   @media (max-width:1240px) {
-    margin-left: 15%;
-    max-width: 70%;
+    //margin-left: 15%;
+    //max-width: 70%;
   }
 }
 

components/Home/Promotion.vue

@@ -169,7 +169,7 @@ const { mdAndUp } = useDisplay()
       line-height: 3.5rem;
       height: 10rem;
       width: 40rem;
-      margin: 3rem 2rem 5rem;
+      margin: 3rem auto 5rem;
     }
 
     .v-img {

components/Home/Reviews.vue

@@ -172,7 +172,7 @@
         </v-col>
       </v-row>
 
-      <v-row class="justify-center align-center">
+      <v-row class="justify-center align-center mb-8">
         <v-col class="d-flex justify-space-around align-center">
           <v-btn
             icon="fas fa-arrow-left-long"
@@ -195,7 +195,7 @@
         </v-col>
       </v-row>
 
-      <CommonCarouselClients :items="items" class="alt-theme"/>
+      <CommonCarouselClients :items="items" class="alt-theme pt-12"/>
     </div>
   </LayoutContainer>
 </template>

components/Home/Solution.vue

@@ -45,7 +45,7 @@ Section "Solutions" de la page d'accueil
             </nuxt-link>
 
             <v-row class="details">
-              <v-col cols="12" md="6">
+              <v-col cols="12" sm="6">
                 <ul>
                   <li
                     v-for="(sol, i) in solution.solutions.slice(0, 4)"
@@ -56,7 +56,7 @@ Section "Solutions" de la page d'accueil
                 </ul>
               </v-col>
 
-              <v-col cols="12" md="6">
+              <v-col cols="12" sm="6">
                 <ul>
                   <li
                     v-for="(sol, i) in solution.solutions.slice(4)"
@@ -265,7 +265,7 @@ h4 {
     font-size: 0.8rem;
     border-radius: 6px;
     background: var(--secondary-color);
-    color: var(--on-primary-color);
+    color: var(--on-secondary-color);
 
     @media (min-width: 1240px) {
       position: absolute;
@@ -276,6 +276,7 @@ h4 {
     }
 
     @media (max-width: 1240px) {
+      left: auto;
       width: 90%;
       margin: 24px auto;
     }
@@ -336,6 +337,9 @@ h4 {
       }
     }
 
+    @media (max-width: 1240px) {
+      margin: 0 auto;
+    }
 
     @media (max-width: 600px) {
       padding: 18px;

components/Layout/FAQ.vue

@@ -115,7 +115,12 @@ h3 {
   z-index: 2;
   text-transform: none !important;
   line-height: 1rem;
+  margin-right: auto;
 
+  @media (max-width: 1240px) {
+    width: 40%;
+    margin-left: 30%;
+  }
 
   @media (max-width: 600px) {
     width: 90%;

components/Layout/Navigation/Md.vue

@@ -2,21 +2,23 @@
   <div class="app-container">
     <v-app class="navigation-sm">
       <!-- Top bar -->
-      <v-app-bar app>
-        <v-app-bar-nav-icon
-          @click="toggleMenu"
-        />
-
-        <nuxt-link to="/">
-          <v-img
-            class="logo-md"
-            :src="smAndUp ? '/images/logo/navigation-logo.png' : '/images/Opentalent_Griffe.png'"
+      <v-app-bar>
+        <template #prepend>
+          <v-app-bar-nav-icon
+            @click="toggleMenu"
           />
-        </nuxt-link>
+        </template>
 
-        <v-spacer />
+        <v-app-bar-title>
+          <nuxt-link to="/">
+            <v-img
+              class="logo-md"
+              :src="smAndUp ? '/images/logo/navigation-logo.png' : '/images/Opentalent_Griffe.png'"
+            />
+          </nuxt-link>
+        </v-app-bar-title>
 
-        <div class="mx-4">
+        <template #append>
           <v-btn
             href="https://admin.opentalent.fr/#/login/"
             icon="fas fa-user"
@@ -35,7 +37,7 @@
               class="icon"
             />
           </AgendaLink>
-        </div>
+        </template>
       </v-app-bar>
 
       <!-- Tiroir de navigation principal -->
@@ -147,6 +149,10 @@ const withAnimation = (callback: () => void) => {
   height: 54px;
 }
 
+.v-app-bar {
+  max-width: 100vw;
+}
+
 .navigation-sm {
   background-color: var(--neutral-color);
   position: fixed;

components/Logiciels/School/Formations.vue

@@ -138,6 +138,19 @@ const formations: Array<Formation> = [
     color: var(--on-primary-color);
   }
 
+  @media (max-width: 1240px) {
+    .background-img, h3, h4, .details {
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    .v-btn {
+      width: 80%;
+      margin-left: 10%;
+    }
+  }
+
   @media (max-width: 600px) {
     .v-btn {
       height: 96px;
@@ -150,6 +163,5 @@ const formations: Array<Formation> = [
       text-align: center;
     }
   }
-
 }
 </style>

pages/actualites/index.vue

@@ -16,19 +16,6 @@
     imageAlt="Journaux pliés en deux posés les uns à côté des autres"
   />
 
-  <v-row class="mb-12 center-90">
-    <v-col class="d-flex align-items-center">
-      <v-btn
-        to="/"
-        prepend-icon="fas fa-arrow-left"
-        variant="outlined"
-        class="back-button"
-      >
-        Retour aux actualités
-      </v-btn>
-    </v-col>
-  </v-row>
-
   <v-row class="center-90">
     <v-col cols="12">
       <NewsList />