mobile header & home

web/themes/custom/reha/scss/global/variables/_buttons.scss

@@ -7,6 +7,9 @@
     border: solid black 1px;
     margin-bottom: 1rem;
     background-color: $white-button;
+    @media (max-width:891px) {
+        font-size: 1rem;
+     }
     
 }
 

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

@@ -13,6 +13,9 @@
             @media(max-width: 891px){
             font-size: 4rem;
             }
+            @media(max-width: 520px){
+                font-size: 3rem;
+            }
         }
         
         h5{
@@ -24,6 +27,10 @@
             font-size: 4rem;
             line-height: 0.9;
             }
+            @media(max-width: 520px){
+                font-size: 3rem;
+            }
+            
         }
 
         .block-region-content{
@@ -45,7 +52,7 @@
             .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f{
                 grid-column: 1;
                 grid-row: 2 /span 2;
-                width: 85%;
+                width: 80%;
                 border: solid $yellow-puca 1px;
                 background-color: $white-button;
                 font-weight: 800;
@@ -53,6 +60,7 @@
                 margin-right: 1rem;
                 @media(max-width: 891px){
                     margin-bottom: 1rem;
+                    // margin: auto;
                 }
 
                 h2{
@@ -111,6 +119,9 @@
                 justify-content: flex-end;  
                 align-items: center;
                 @media(max-width: 891px){
+                    width: 90%;
+                }
+                @media(max-width: 520px){
                     width: 100%;
                 }
                 .field--type-file{
@@ -132,6 +143,9 @@
                 justify-content: flex-end;  
                 align-items: center; 
                 @media(max-width: 891px){
+                    width: 90%;
+                }
+                @media(max-width: 520px){
                     width: 100%;
                 }
                 .field--type-file{

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

@@ -17,6 +17,9 @@ input{
     font-weight: 300;
     width: fit-content;
     @extend %buttonwithborder;
+    @media (max-width:891px) {
+        font-size: 1rem;
+     }
 }
 
 #user-login-form{

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

@@ -104,13 +104,23 @@ header{
                     @media (max-width:891px) {
                         top: 15px;
                     }
+                    @media (max-width:500px) {
+                        top: 15px;
+                        right: -150px;
+                        width: 100vw;
+                        height: fit-content;
+                    }
                     .titre{
                         width: 100%;
                         position: relative;
                         ::after{
                             position: relative;
                             left: 430px;
+                            @media (max-width:500px) {
+                                left: 325px;
+                            }
                         }
+                       
                     }
                     #user-login-form{
 
@@ -169,6 +179,9 @@ header{
                             border: solid black 1px;
                             margin-bottom: 1rem;
                             background-color: $white-button;
+                            @media (max-width:891px) {
+                               font-size: 1rem;
+                            }
                         p{
                             font-style: italic;
                          }
@@ -224,13 +237,20 @@ header{
                         padding-top: 1rem;
                         height: fit-content;
                     }
+
                     .titre{
                         padding-left:3rem ;
+                        @media (max-width:500px) {
+                            padding-left: 1.5rem;
+                        }
                         ::after{
                             left: 320px;
                             @media(max-width: 891px){
                                 left: 242px;
                             }
+                            @media (max-width:500px) {
+                                left: 175px;
+                            }
                         }
                             
                         }
@@ -239,6 +259,10 @@ header{
                         display: flex;
                         flex-direction: column;
                         padding-left: 3rem;
+                        @media (max-width:500px) {
+                            padding-left: 1.5rem;
+                            padding-bottom: 2rem;
+                        }
                     }
                 } 
             }