src/components/CompetenceProjetView.vue

 <template>
   <TitleComposant label="Compétences" class="q-mt-xl" />
-  <div class="text-h5 q-ml-xl q-pb-xl">
+  <div class="text-h5 q-ml-xl q-pb-xl" :class="$q.screen.lt.md ? 'text-h6' : ''">
     Ce projet visé à développer les compétences et savoir-faire informatique suivante :
-    <div class="text-h6 q-ml-md q-mt-sm" style="font-weight: normal" v-for="skill in skills" :key="skill" >• {{skill}}</div>
+    <div class="text-h6 q-ml-md q-mt-sm" :class="$q.screen.lt.md ? 'text-subtitle1' : ''" :style="$q.screen.lt.md ? 'font-weight: bold' : 'font-weight: normal'" v-for="skill in skills" :key="skill" >• {{skill}}</div>
   </div>
 </template>
 

src/components/linkView.vue

 <template>
   <title-composant label="liens" class="q-mt-xl" />
-  <div class="q-ml-xl text-h5 q-mb-xl">
+  <div class="q-ml-xl text-h5 q-mb-xl" :class="$q.screen.lt.md ? 'text-h6' : '' ">
     <div class="text-secondary link-color" v-html="link" />
   </div>
 </template>

src/layouts/MainLayout.vue

@@ -24,11 +24,11 @@ import HeaderView from 'components/HeaderView.vue'
 <style>
 .screen-responsive {
   width: 100%;
-  max-width: 1200px;
+  max-width: 1024px;
   margin: 0 auto;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1096px) {
   .screen-responsive {
     width: 90%;
   }

src/layouts/ProjetLayout.vue

@@ -24,11 +24,11 @@ const hover = ref(0)
 <style scoped>
 .screen-responsive {
   width: 100%;
-  max-width: 1200px;
+  max-width: 1024px;
   margin: 0 auto;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1096px) {
   .screen-responsive {
     width: 90%;
   }