Responsive create account page

src/components/InstanceCard.vue

@@ -96,7 +96,7 @@
   @import '../scss/_variables.scss';
 
   .root {
-    height: 185px;
+    min-height: 185px;
     width: 770px;
     margin: auto;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
@@ -129,6 +129,7 @@
     .name-host {
       display: flex;
       margin-bottom: 3px;
+      flex-wrap: wrap;
     }
 
     .name {
@@ -178,6 +179,32 @@
       align-self: flex-end;
     }
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    .root {
+      width: auto;
+      flex-direction: column;
+      padding: 15px 10px;
+
+      .left {
+        width: auto;
+        margin-right: 0;
+      }
+
+      .right {
+        margin-top: 20px;
+
+        .follow,
+        .languages {
+          margin-bottom: 5px;
+        }
+
+        .link {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
 </style>
 
 <script>

src/components/InstancesList.vue

@@ -173,7 +173,7 @@
           color: #000;
           background-color: #fff;
           border-color: $orange;
-          height: 30px;
+          min-height: 30px;
           padding: 0 15px;
           cursor: pointer;
 
@@ -190,6 +190,26 @@
   .instances-list {
     margin-bottom: 50px;
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    .filters {
+      margin-bottom: 100px;
+
+      form {
+        padding-left: 15px;
+
+        .group {
+          flex-direction: column;
+          align-items: flex-start;
+
+          label {
+            margin-bottom: 5px;
+            font-size: 15px;
+          }
+        }
+      }
+    }
+  }
 </style>
 
 <style lang="scss">
@@ -239,6 +259,21 @@
       min-height: 400px;
     }
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    .custom-checkbox {
+      .custom-control-label > span {
+        font-size: 15px;
+      }
+    }
+
+    #themes {
+      .custom-control {
+        margin-right: 10px;
+        width: calc(50% - 10px) !important;
+      }
+    }
+  }
 </style>
 
 <script>

src/views/Instances.vue

@@ -94,6 +94,20 @@
       margin-bottom: 20px;
     }
   }
+
+  @media screen and (max-width: $small-screen) {
+    .blocks {
+      width: auto;
+    }
+
+    .block-with-image {
+      flex-direction: column;
+
+      img {
+        margin-bottom: 20px;
+      }
+    }
+  }
 </style>
 
 <script>