css mobile

web/themes/custom/reha/css/reha.css

@@ -152,6 +152,9 @@
   @media (max-width: 891px) {
     .layout-content {
       width: 90%; } }
+  @media (max-width: 500px) {
+    .layout-content {
+      padding-top: 0; } }
 
 aside {
   width: 20%;
@@ -163,12 +166,19 @@ aside {
     aside {
       margin-left: 5%;
       margin-top: 9rem; } }
+  @media (max-width: 500px) {
+    aside {
+      width: 80%;
+      margin-top: 3rem; } }
 
 main {
   width: 100%;
   display: flex;
   flex-direction: row;
   position: relative; }
+  @media (max-width: 500px) {
+    main {
+      flex-direction: column; } }
 
 .main-content {
   margin-top: 7rem; }
@@ -236,6 +246,10 @@ header {
         header .region-header #block-reha-logoministere {
           padding-left: 80px;
           padding-top: 20px; } }
+      @media (max-width: 500px) {
+        header .region-header #block-reha-logoministere {
+          padding-left: 30px;
+          padding-top: 20px; } }
     header .region-header #block-reha-logoreha {
       display: none;
       grid-column: 2;
@@ -285,9 +299,9 @@ header {
               height: fit-content; } }
           @media (max-width: 500px) {
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
-              top: 15px;
+              top: 55px;
-              right: -150px;
+              right: -90px;
-              width: 100vw;
+              width: 400px;
               height: fit-content; } }
           header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre {
             width: 100%;
@@ -378,6 +392,9 @@ header {
               padding-left: 0;
               padding-top: 1rem;
               height: fit-content; } }
+          @media (max-width: 500px) {
+            header .region-header #block-reha-config-pages .contacts .contacts-full {
+              width: -moz-available; } }
           header .region-header #block-reha-config-pages .contacts .contacts-full .titre {
             padding-left: 3rem; }
             @media (max-width: 500px) {
@@ -464,6 +481,11 @@ header {
     text-transform: lowercase;
     display: inline-flex;
     font-size: 1rem; }
+    @media (max-width: 891px) {
+      .bouton h2 {
+        font-size: 0rem;
+        color: white;
+        padding-right: 0 !important; } }
 
 .titre {
   display: inline-flex;
@@ -591,9 +613,15 @@ label {
 input {
   height: 2rem;
   width: 50%; }
+  @media (max-width: 500px) {
+    input {
+      width: 90%; } }
 
 .description {
   width: 50%; }
+  @media (max-width: 500px) {
+    .description {
+      width: 90%; } }
 
 .form-submit {
   height: 4rem !important;
@@ -685,6 +713,9 @@ input {
       grid-column: 1 /span 2;
       grid-row: 1;
       margin-bottom: 2rem; }
+      @media (max-width: 500px) {
+        .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 img {
+          width: -moz-available; } }
     .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
       grid-column: 1;
       grid-row: 2 /span 2;
@@ -777,6 +808,9 @@ input {
 .user--register h1 {
   font-size: 3rem !important;
   font-weight: 600; }
+  @media (max-width: 500px) {
+    .user--register h1 {
+      font-size: 2.5rem !important; } }
 
 .user--register .form-item {
   margin-bottom: 2rem; }
@@ -804,6 +838,10 @@ input {
     width: 70%;
     margin-left: 2rem; } }
 
+@media (max-width: 500px) {
+  .mes-operations {
+    width: 90%; } }
+
 .mes-operations .views-row {
   width: 80%;
   padding-bottom: 1rem;

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;
+                        top: 55px;
-                        right: -150px;
+                        right: -90px;
-                        width: 100vw;
+                        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;
+            }
         }
     }