modifiaction responsive de la page offre d'emploi

public/css/styles.css

@@ -48,7 +48,13 @@ .navbar-toggler span {
     transition: all 0.35s ease-out;
     transform-origin: center left;
   }
-  
+
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
   
   
   .navbar-toggler span:nth-child(1) {

resources/views/offres/index.blade.php

@@ -14,21 +14,21 @@
                         <span class="blue fs-3 px-1">{{ $offre->type }}</span>
                     </div>
                     <div class="mb-4">
-                        <p class="text-muted fs-4">{{ $offre->presentation }}</p>
+                        <p class="text-muted fs-4 line-clamp-2">{{ $offre->presentation }}</p>
                     </div>
-                    <div class="d-flex justify-content-between align-items-center">
+                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                         @if ($offre->posts->count() > 0)
                             @foreach ($offre->posts as $post)
-                                <p class="mb-0 text-secondary fs-5">Projet lié : <span
-                                        class="blue">{{ $post->titre }}
-                                    </span> </p>
+                                <p class="mb-0 text-secondary fs-5 w-100 md:w-auto">Projet lié : <span class="blue">{{ $post->titre }}</span></p>
                             @endforeach
                         @else
-                            <p class="mb-0 text-secondary fs-5">Pas de projet lié</p>
+                            <p class="mb-0 text-secondary fs-5 w-100 md:w-auto">Pas de projet lié</p>
                         @endif
-                        <a href="{{ route('offres.show', $offre) }}" class="btn btn-primary btn-lg px-5">Voir
-                            l'Offre</a>
+                        <a href="{{ route('offres.show', $offre) }}" class="btn btn-primary px-5 py-3 text-lg sm:px-4 sm:py-2 sm:text-base mt-3 md:mt-0">
+                            Voir l'Offre
+                        </a>
                     </div>
+                    
                 </div>
             </a>
         @endforeach