modif order

user/themes/gilles_acezat/scss/theme/mobile.scss

@@ -1,37 +1,160 @@
-@media screen and (max-width: 960px) {
-
+@media screen and (max-width: 1024px) {
+  .card{
+    width: calc((100% / 2) - 10px);
+  }
   .works-mea{
-    & > div:last-child{
-      display: none;
+    .card{
+      &:nth-child(3){
+        display: none;
+      }
     }
   }
-  .card{
-    width: calc((100% / 2) - 5px )!important;
+
+  #items{
+    .header-item{
+      .info{
+        width: calc(100% / 2);
+      }
+    }
+  }
+  .img-card{
+    width: calc((100% / 2) - 5px);
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (orientation:landscape) and (max-width: 812px) {
+.blog{
   header{
     .head{
-      padding: 0!important;
-    }
-    h1{
-      font-size: 2.5rem!important;
-      line-height: 5rem!important;
-      -webkit-text-stroke: 1px black!important;
-    }
-    h2{
-      font-size: 1.5rem;
-      line-height: 0rem!important;
-      margin: -0.7rem 0 0 0!important;
+      nav{
+        margin-top: 50vh;
+        transform: translate(0, -100%);
+      }
     }
   }
-  .works-mea{
-    & > div:nth-child(2){
-      display: none;
+  .down{
+    header{
+      .head{
+        nav{
+          margin-top: 0!important;
+          transform: translate(0)!important;
+          transition: all 0.5s 1s ease;
+        }
+      }
+    }
+  }
+    .works-mea{
+      display: none!important;
+    }
+  }
+}
+
+@media screen and (max-width: 414px) {
+  .down header, .item header{
+    height: 70px;
+  }
+  header{
+    .head{
+      padding-top: 10px;
+      nav{
+        width: 80%!important;
+        min-width: 80%!important;
+      }
+    }
+    .contact{
+      width: 70px;
+      height: 70px;
+      h3{
+        top: 24px;
+        right: 27px;
+      }
+      &.open{
+        .txt{
+          right: 25px;
+          width: calc(100% - 30px);
+          height: calc(100% - 50px);
+          overflow-y: auto;
+          p{
+            font-size: 1rem;
+            line-height: 1.4rem;
+            &:nth-last-of-type(2){
+              font-size: 0.8rem;
+              line-height: 1.2rem;
+              a{
+                width: 15px;
+                margin-left: 5px;
+              }
+            }
+            em{
+              font-size: 0.5rem;
+            }
+          }
+        }
+      }
+      &.close{
+        width: 70px;
+        height: 70px;
+      }
+    }
+    .works-mea{
+      .card{
+        width: 100%;
+        &:nth-child(2){
+          display: none;
+        }
+        &:nth-child(3){
+          display: none;
+        }
+      }
+    }
+  }
+
+  .blog{
+    h2{
+      line-height: 9vw;
+      font-size: 6vw;
+    }
+  }
+  .down, .item{
+    #start{
+      margin-top: 70px;
     }
   }
   .card{
-    width: 100%!important;
+    width: calc(100% - 10px);
+  }
+
+  #items{
+    .header-item{
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: reverse;
+          -ms-flex-direction: column-reverse;
+              flex-direction: column-reverse;
+      & > div{
+        width: 100%!important;
+      }
+      & > .info{
+        margin-top: 25px;
+        .title{
+        display: block;
+          & > a {
+            margin-right: 0;
+          }
+        }
+      }
+      .prev-next{
+        .btn-info{
+          display: none;
+        }
+      }
+    }
+  }
+  .img-card{
+    width: calc(100%);
+  }
+  .item{
+    #items{
+      padding-top: 25px;
+    }
   }
 }