@media teaser ressource image

2025-06-09 01:53:07 +02:00
parent f19639719e
commit c084bf159f
3 changed files with 200 additions and 9 deletions
@@ -257,9 +257,98 @@ article.node-type-ressource{
        }
    }

-    article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
-        display: flex;
-       background: lawngreen;
-      }

-}
+
+
+}
+.type-les-projets-en-images.views-row{
+    width: 50% !important;
+    // min-width: 0 !important;
+    min-width: 550px !important;
+    max-width: 0 !important;
+    @media (max-width: 479px) {
+        min-width: 100% !important;
+    } 
+
+    article.node-type-ressource.type-les-projets-en-images {
+        .wrapper-ressource {
+        display: grid;
+        grid-template-columns: 3fr 1fr !important; // ✅ 85% pour image, 15% pour texte
+        width: 100%; // ✅ force la grille à s'étaler sur toute la ligne
+        max-width: 100%; // ✅ limite d'expansion
+        gap: 1rem;
+        align-items: start;
+        @media (max-width: 479px) {
+            display: flex;
+            flex-direction: column;
+        }
+    
+        .field--name-field-images {
+            grid-column: 1;
+            grid-row: 3 / span 8;
+            width: 100%;
+            img {
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+            border: 1px solid #ccc;
+            
+            }
+           
+            .field__item{
+                @media (max-width: 479px) {
+                    // margin-bottom: 4rem;
+                    height: auto;
+                }
+            }
+        }
+        .field--name-field-type-de-media{
+            grid-column: 1 /span 2;
+            grid-row: 2;
+        }
+        .field--name-field-type-de-ressource{
+            grid-column: 1 /span 2;
+            grid-row: 1;
+        }
+        // Forcer les champs texte à ne pas déborder
+
+        .field--name-title,
+        .field--name-field-sous-titre,
+        .field--name-field-auteur-s-,
+        .field--name-field-edition,
+        .field--name-field-date-de-parution,
+        .field--name-field-mots-clefs {
+            grid-column: 2;
+            width: 100%; // ✅ évite que ça casse la colonne
+            box-sizing: border-box;
+            padding: 0;
+            margin: 0;
+        }
+        .field--name-title{
+            grid-row: 3;
+        }
+        .field--name-field-sous-titre{
+            grid-row: 4;
+        }
+        .field--name-field-auteur-s-{
+            grid-row: 5;
+        }
+        .field--name-field-edition{
+            grid-row: 6;
+        }
+        .field--name-field-date-de-parution{
+            grid-row: 7;
+        }
+        .field--name-field-mots-clefs{
+            grid-row: 8;
+        }
+    
+        // Supprimer les marges internes de h2, p, etc.
+        h2, p {
+            margin: 0;
+            padding: 0;
+        }
+        }
+    }
+}  
+