modif css

user/themes/figureslibres/scss/theme/_mobile.scss

@@ -4,10 +4,19 @@
       width: $Wi80-m;
       #text_figli{
         #item_list{
+          &.figureslibres, &.logiciels-libres{
+            width: 100%;
+          }
           .card{
             width: $Wi33-m;
             #item{
               width: calc(300% + (.5rem * 2));
+              .content-title{
+                margin: 1rem auto 1rem auto;
+              }
+              .e-content{
+                width: 100%;
+              }
             }
           }
         }
@@ -16,33 +25,62 @@
   }
 }
 
-@media screen and (max-width: 414px) {
+
+@media screen and (max-width: 1000px){
+  .sidebar-right{
+    .list-projets {
+      .container{
+        width: 100%;
+        float: none;
+        padding-bottom: 0;
+      }
+      .informations{
+        float: none;
+        padding-left: 0.5rem;
+        margin-left: 10px;
+      }
+    }
+  }
+  #item_list{
+    width: 90vw!important;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  body #start #text_figli #item_list .card{
+    width: calc((100% / 2) - .5rem);
+    #item{
+      width: calc(90vw - 0.5rem);
+    }
+  }
+
+}
+
+@media screen and (max-width: 510px) {
   body{
     #start{
       width: $Wi-m;
-      margin: 0rem auto 2rem auto;
-      padding-right: 2rem; 
+      margin: 0.5rem auto 2rem auto;
       #text_figli{
         p{
           font-size: 1.7rem;
           line-height: 2.3rem;
-          a{
-            &:before,
-            &:after {
-              width: 50%;
-              opacity: 1;
-              background-color: black;
-            }
-          }
         }
         #item_list{
-          width: 100%;
+          width: 100%!important;
+          &.figureslibres, &.logiciels-libres{
+            min-width: 100%;
+          }
           .card{
             width: calc(100%);
             margin: 0 0 0.5rem 0;
             #item{
               width: 100%;
               padding: 1rem;
+              .e-content{
+                min-width: 100%;
+                margin: 2rem 0;
+              }
               .content-title{
                 h2{
                   font-size: 2rem !important;
@@ -63,8 +101,7 @@
       right: -100%;
       #icone_list{
         z-index: 0;
-        width: 100%;
-        // background-color: #f9f9f9fe;
+        top: 0;
         .hamburger{
           float: right;
           z-index: 999;
@@ -72,22 +109,61 @@
       }
       .list-projets{
         z-index: 999;
-        ul{
-          text-align: center;
-          span{
-            text-align: center;
+        .title-menu{
+          h2{
+            font-size: 1.7rem;
+            line-height: 2.3rem;
           }
+        }
+        ul{
           li{
-            text-align: center;
             margin-top: 0!important;
+            display: initial!important;
+            font-size: 1rem;
+            line-height: 1.5rem;
             &::before{
               width: 100%;
             }
             a{
-              padding: 0.5rem;
+              display: initial!important;
+              padding: 0rem!important;
+              font-size: 1rem;
+              line-height: 1.5rem;
+              img{
+                display: none!important;
+              }
+            }
+            &> span{
+              font-size: 1rem;
+              line-height: 1.5rem;
             }
           }
         }
+        .container-wrap{
+          display: block;
+          .container{
+            &::after{
+              height: 1px;
+              width: 0;
+              bottom: 0;
+              top: auto!important;
+              left: 0!important;
+            }
+          }
+        }
+      }
+      &.is-active{
+        .container{
+          &::after{
+            width: 100%!important;
+            transition: 1s width 1s ease;
+          }
+        }
+      }
+      .informations{
+        h3{
+          font-size: 1.1rem;
+        }
       }
     }
   }