Responsive: Mobile

src/App.vue

@@ -38,8 +38,8 @@ export default {
     setTimeout(() => {
       // Add the class slidedown in the header
       document.querySelector(".spot")
-      .classList.add('slidedown');
-    }, 500)
+        .classList.add('slidedown');
+    }, 500);
   },
 };
 </script>

src/components/Feed.vue

@@ -42,7 +42,7 @@
     </div>
 
     <div class="loading" v-show="loading">
-      <article v-for="fake in [1, 2, 3, 4, 5, 6, 7, 8]"></article>
+      <article v-for="fake in [1, 2, 3, 4, 5, 6, 7, 8]" :key="fake.id"></article>
     </div>
   </div>
 </template>
@@ -243,4 +243,25 @@ export default {
     position: absolute;
     background-color: #DDD;
   }
+
+  @media screen and (max-width: 450px) {
+    .wrap{
+      width: 90%;
+    }
+
+    .video,
+    .loading article{
+      width: 100%
+    }
+
+    .tags{
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    .tags li{
+      margin-bottom: 10px;
+    }
+  }
 </style>

src/components/Player.vue

@@ -34,6 +34,13 @@ export default {
 <style>
   .player iframe{
     width: 100%;
-    height: 460px
+    height: 560px;
+    background-color: #DDD;
+  }
+
+  @media screen and (max-width: 450px) {
+    .player iframe {
+      height: 200px;
+    }
   }
 </style>