Fix responsive

src/components/InstanceCard.vue

@@ -190,27 +190,25 @@
     }
 
     @media screen and (max-width: $responsive-screen) {
-      .root {
+      width: auto;
-        width: auto;
+      flex-direction: column;
-        flex-direction: column;
+      padding: 15px;
-        padding: 15px 10px;
 
-        .left {
+      .left {
-          width: auto;
+        width: auto;
-          margin-right: 0;
+        margin-right: 0;
+      }
+
+      .right {
+        margin-top: 20px;
+
+        .follow,
+        .languages {
+          margin-bottom: 5px;
         }
 
-        .right {
+        .link {
           margin-top: 20px;
-
-          .follow,
-          .languages {
-            margin-bottom: 5px;
-          }
-
-          .link {
-            margin-top: 20px;
-          }
         }
       }
     }

src/scss/main.scss

@@ -155,6 +155,10 @@ p > a {
     height: 3px;
     background-color: $orange;
     flex-grow: 1;
+
+    @media screen and (max-width: $small-screen) {
+      display: none;
+    }
   }
 }
 
@@ -175,7 +179,12 @@ p > a {
   }
 
   @media screen and (max-width: $small-screen) {
-    margin: 50px 0 30px 0;
+    margin: 75px 0 30px 0;
+    font-size: 25px;
+
+    .brand-title {
+      height: 30px;
+    }
   }
 }
 
@@ -188,6 +197,7 @@ p > a {
 
   @media screen and (max-width: $responsive-screen) {
     white-space: normal;
+    margin-top: 50px;
   }
 }
 

src/views/Hall-Of-Fame.vue

@@ -611,6 +611,17 @@
         }
       }
     }
+
+    @media screen and (max-width: $small-screen) {
+      .sponsors a img {
+        width: 100%;
+        height: auto;
+      }
+
+      ul li {
+        display: block;
+      }
+    }
   }
 </style>
 

src/views/Help.vue

@@ -127,6 +127,7 @@
 
       .text-block {
         text-align: right;
+        width: 100%;
 
         p {
           margin-bottom: 0;
@@ -153,6 +154,10 @@
     }
 
     @media screen and (max-width: $small-screen) {
+      .title-block {
+        margin-bottom: 60px;
+      }
+
       .blocks {
         width: auto;
       }
@@ -160,6 +165,11 @@
       .block-with-image {
         flex-direction: column;
 
+        &.community,
+        &.contribute {
+          flex-direction: column-reverse;
+        }
+
         .text-block {
           margin-left: 0 !important;
         }

src/views/Home.vue

@@ -401,7 +401,7 @@
         .brand {
           height: 47px;
           margin-bottom: 20px;
-          margin-left: -30px;
+          margin-left: -10px;
         }
 
         div {
@@ -411,18 +411,18 @@
         .description {
           font-size: 24px;
           font-weight: 600;
+          text-align: center;
         }
 
         @media screen and (max-width: $small-screen) {
-          padding: 15px 0;
+          padding: 40px 0 0 0;
 
           .brand {
-            height: 25px !important
+            height: 50px !important
           }
 
           .description {
             font-size: 20px;
-            margin-left: 20px;
           }
         }
       }

src/views/Instances.vue

@@ -15,7 +15,7 @@
         </a>
       </div>
 
-      <div class="block-with-image">
+      <div class="block-with-image step-1">
         <div>
           <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Multiple instances illustration">
         </div>
@@ -30,7 +30,7 @@
         </div>
       </div>
 
-      <div class="block-with-image">
+      <div class="block-with-image step-2">
         <div>
           <div class="title" v-translate>2. Create your account and enjoy PeerTube</div>
 
@@ -100,6 +100,10 @@
       .block-with-image {
         flex-direction: column;
 
+        &.step-2 {
+          flex-direction: column-reverse;
+        }
+
         img {
           margin-bottom: 20px;
         }