various fixes for responsive on md screens

components/About/FAQ.vue

@@ -19,7 +19,7 @@
 
             <v-btn
               to="/nous-contacter"
-              class="mt-12"
+              class="inv-theme mt-12"
             >
               Nous contacter
             </v-btn>
@@ -39,10 +39,7 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   height: 20rem;
 }
 
-.help-img {
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 100%;
+.v-img {
   height: 20rem;
 }
 
@@ -64,17 +61,22 @@ h4 {
 .v-btn {
   width: 195px;
   height: 53px;
-  background: var(--secondary-color);
+  background: var(--secondary-color) !important;
   border-radius: 6px;
   color: var(--on-secondary-color);
   padding: 19px 28px;
   gap: 9px;
   margin-left: 84px;
 
+  @media (max-width: 1240px) {
+    width: 40%;
+    margin-left: 30%;
+    margin-bottom: 48px;
+  }
+
   @media (max-width: 600px) {
     width: 80%;
     margin-left: 10%;
-    margin-bottom: 48px;
   }
 }
 </style>

components/About/Presentation.vue

@@ -2,14 +2,14 @@
   <AnchoredSection id="about">
     <LayoutContainer>
       <v-row class="mt-12 center-90">
-        <v-col md="4">
+        <v-col cols="12" lg="4">
           <LayoutUISubTitle>
             Qui sommes-nous ?
           </LayoutUISubTitle>
         </v-col>
 
-        <v-col md="8">
-          <div class="italic-title mr-8">
+        <v-col cols="12" lg="8">
+          <div class="italic-title">
             “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
             la référence pour la gestion et la promotion du spectacle vivant sur
             les territoires.”
@@ -85,6 +85,13 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   width: 80%;
   margin-left: auto;
   margin-bottom: auto;
+  margin-right: 32px;
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 .v-row.history {
@@ -138,6 +145,14 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
       width: 100%;
     }
   }
+
+  @media (max-width: 1240px) {
+    h3, h4, p, .v-img {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 }
 
 

components/About/Valeurs.vue

@@ -8,7 +8,7 @@
       </v-row>
 
       <v-row class="mt-6 center-90 align-center mb-12">
-        <v-col md="6">
+        <v-col cols="12" lg="6">
           <v-img
             src="/images/about/valeurs/valeur.png"
             alt="Quatre photos: une prise de haut où l’on voit les pieds d’une personne avec un smiley dessiné sur du goudron, l'une de mains tenant de la terre avec une plante dans un décor de forêt, l'une d’une enseigne lumineuse écrit « Open » en blanc entouré d’un cercle orange et l'une de mains de femmes posées les unes en dessus des autres."
@@ -17,7 +17,7 @@
           />
         </v-col>
 
-        <v-col md="6">
+        <v-col cols="12" lg="6">
           <div class="values">
             <v-row
               v-for="(row, rowIndex) in values"
@@ -100,11 +100,19 @@ const values: Array<Array<SocietyValue>> = [
   background-position: center;
   height: 400px;
   width: 450px;
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 .values {
   .v-row {
-    border-top: 1px solid var(--on-neutral-color-extra-light);
+    @media (min-width: 1240px) {
+      border-top: 1px solid var(--on-neutral-color-extra-light);
+    }
   }
 
   .v-img {
@@ -126,5 +134,11 @@ const values: Array<Array<SocietyValue>> = [
     color: var(--primary-color);
     margin-bottom: 1rem;
   }
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 </style>

components/Formation/OPCA.vue

@@ -79,4 +79,11 @@ h3 {
   margin: auto;
   text-align: justify;
 }
+
+@media (max-width: 1240px) {
+  .v-img {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
 </style>

components/Formation/Presentation.vue

@@ -84,6 +84,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 h3, p {
   width: 35rem;
   max-width: 100%;
+
+  @media (max-width: 1240px) {
+    width: 100%;
+  }
 }
 
 h3 {

components/News/List.vue

@@ -24,18 +24,16 @@
         <v-card-item>
           <v-container fluid>
             <v-row align="center">
-              <v-col cols="12" md="3">
+              <v-col cols="12" lg="3">
                 <v-img
                   v-if="newsItem.attachment"
                   :src="getImageUrl(newsItem.attachment)"
                   alt="poster"
-                  height="200"
-                  width="400"
                   cover
                 />
               </v-col>
 
-              <v-col cols="12" md="9">
+              <v-col cols="12" lg="9">
                 <div class="details">
                   <NuxtLink
                     :to="`/actualites/${newsItem.id}`"
@@ -175,10 +173,16 @@ h1 {
   }
 
   .v-img {
-    width: 80%;
+    width: 100%;
     max-height: 160px;
     margin: 12px;
     border-radius: 14px;
+
+    @media (max-width: 1240px) {
+      width: 97%;
+      margin: 1.5%;
+    }
+
   }
 
   .details {
@@ -187,9 +191,9 @@ h1 {
     border-radius: 24px;
     width: 99%;
 
-    @media (max-width: 600px) {
+    @media (max-width: 1240px) {
       width: 94%;
-      margin: 12px 3%;
+      margin: -18px 3% 12px;
     }
 
     .v-card-title {
@@ -197,6 +201,10 @@ h1 {
       font-size: 36px;
       font-weight: 600;
       line-height: 39px;
+
+      @media (max-width: 1240px) {
+        font-size: 24px;
+      }
     }
 
     .star {