responsive page 1 projet

2022-04-08 16:12:44 +02:00
parent 82d811d435
commit ae3de8a989
3 changed files with 72 additions and 3 deletions
@@ -136,7 +136,7 @@
                }
            }
        }
-    }                            
+    }  
 }


@@ -15,10 +15,15 @@
                            // position: relative;
                            display: grid;
                            grid-template-columns: 1fr repeat(8, 1fr) 1fr;
+                            // @media (max-width: 479px) {
+                            //     display: flex;
+                            //     flex-direction: column;                                
+                            // }

                            .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{
                                grid-column: 1 / span 10;
                                background-color: $blue-light;
+                                
                                .field--name-body{
                                    vertical-align: middle;
                                    color: $white;
@@ -57,20 +62,29 @@
                                    font-family: "Source Code Pro";
                                    font-size: 2.8rem;
                                    font-weight: 500;
+                                    @media (max-width: 810px){
+                                        font-size: 1.7rem;
+                                    }
                                }
                            }
                            .block-entity-fieldnodefield-equipe{
                                grid-column: 2 / span 7;
+                                @media (max-width: 810px){
+                                    padding-top: 0.5rem;
+                                }
                                .field--name-field-equipe{
                                    color: $blue-dark;
                                    font-size: 1.5rem;
                                    font-weight: 900;
                                    text-transform: uppercase ;
+                                    @media (max-width: 810px){
+                                        font-size: 1rem;
+                                    }
                                }
                            }
                            .block-entity-fieldnodefield-incube{
                                padding-top: 2rem;
-                                grid-column: 2;
+                                grid-column: 2 / span 4;
                                width: fit-content;
                                .field--name-field-incube{
                                    background-color: red;
@@ -79,16 +93,28 @@
                                    padding-right: 0.3rem;
                                    padding-left: 0.2rem;
                                }
+                                @media (max-width: 810px) {
+                                    grid-column: 2 / span 4;
+                                }
                            }
                            .block-entity-fieldnodefield-photo{
                                grid-column-start: 5;
                                grid-column-end: 9;
+                                @media (max-width: 810px) {
+                                    grid-column: 1 / span 10;
+                               
+                                }
                                img{
                                    padding-top: 2rem;
                                    width: 600px;
                                    // height: auto;
                                    max-height: 360px;
                                    object-fit: cover;
+                                    @media (max-width: 810px) {
+                                        padding-top: 1rem;
+                                        object-fit: contain;
+                                        width: 100%;                                 
+                                    }
                                }
                                
                                // position: relative;
@@ -102,6 +128,9 @@
                    .layout__region--first{
                        // margin-top: 18rem;
                        margin-top: 5rem;
+                        @media (max-width: 479px){
+                            display: none;
+                        }
                        .block-region-first{
                            display: flex;
                            justify-content: flex-end;
@@ -143,8 +172,17 @@
                        margin-top: 5rem;
                        flex: 0 1 50%;
                        // margin-top: 18rem;
+                        @media (max-width: 479px) {
+                            flex: 0 1 100%;
+                            margin-top: 1rem;
+                            
+                        }
                        .block-region-second{
                            width: 90%;
+                            @media (max-width: 479px) {
+                                width: 80%;
+                                margin: auto;                                
+                            }
                            .block-entity-fieldnodebody{
                                p{
                                    margin-top: 0;