css mobile

web/themes/custom/reha/scss/global/_layout.scss

@@ -37,6 +37,10 @@ $width-menu-slidedown : 550px;
     @media(max-width: 891px){
         width: 90%;
     }
+    @media (max-width:500px) {
+       padding-top: 0;
+    }
+
         
 }
 
@@ -50,12 +54,19 @@ aside{
         margin-left: 5%;
         margin-top: 9rem;
     }
+    @media (max-width:500px) {
+        width: 80%;
+        margin-top: 3rem;
+    }
 }
 main{
     width: 100%;
     display: flex;
     flex-direction: row;
     position: relative;
+    @media (max-width:500px) {
+        flex-direction: column;
+    }
 
 
 }

web/themes/custom/reha/scss/pages/_creer-un-compte.scss

@@ -4,6 +4,10 @@
     h1{
         font-size: 3rem !important;
         font-weight: 600;
+        @media (max-width:500px) {
+            font-size: 2.5rem !important;
+        }
+    
     }
 
     .form-item{

web/themes/custom/reha/scss/pages/_home.scss

@@ -51,6 +51,12 @@
                 grid-column: 1 /span 2;
                 grid-row: 1;
                 margin-bottom: 2rem;
+                @media(max-width: 500px){
+                    img{
+                        width: -moz-available;
+                    }
+    
+                }
             }
 
 

web/themes/custom/reha/scss/pages/_mes-operations.scss

@@ -12,6 +12,9 @@
         width: 70%;
         margin-left: 2rem;
     }
+    @media (max-width:500px) {
+        width: 90%;
+    }
     .views-row{
         width: 80%;
         padding-bottom: 1rem;

web/themes/custom/reha/scss/partials/_forms.scss

@@ -8,9 +8,16 @@ label{
 input{
     height: 2rem;
     width: 50%;
+    @media (max-width:500px) {
+        width: 90%;
+    }
+
 }
 .description{
     width: 50%;
+    @media (max-width:500px) {
+        width: 90%;
+    }
 }
 .form-submit{
 

web/themes/custom/reha/scss/partials/_header.scss

@@ -43,6 +43,11 @@ header{
                 padding-left: 80px;
                 padding-top: 20px;
             }   
+            @media (max-width:500px) {
+                // width: 10%;
+                padding-left: 30px;
+                padding-top: 20px;
+            }  
             
         }
         #block-reha-logoreha{
@@ -116,11 +121,12 @@ header{
                     //     height: fit-content;
                     // }
                     @media (max-width:500px) {
-                        top: 15px;
-                        right: -150px;
-                        width: 100vw;
+                        top: 55px;
+                        right: -90px;
+                        width: 400px;
                         height: fit-content;
                     }
+                    
                     .titre{
                         width: 100%;
                         position: relative;
@@ -242,6 +248,12 @@ header{
                         padding-top: 1rem;
                         height: fit-content;
                     }
+                    @media (max-width:500px) {
+                        
+                            width: -moz-available;
+                        
+                    }
+    
                     
 
                     .titre{
@@ -351,6 +363,11 @@ header{
             text-transform: lowercase;
             display: inline-flex;
             font-size: 1rem;
+            @media (max-width:891px) {
+                font-size: 0rem;
+                color: white;
+                padding-right: 0 !important;
+            }
         }
     }