better support for mobile devices

src/components/MultiKillsChart.vue

@@ -1,12 +1,9 @@
 <template>
-  <h3 class="text-center col-12 mt-3">Multi-Kills</h3>
-  <div class="player-dmg col-12">
-    <div class="team-1">
-      <div id="multi-kills-chart-1"></div>
-    </div>
-    <div class="team-2">
-      <div id="multi-kills-chart-2"></div>
-    </div>
+  <div class="multi-kills">
+    <h3>Multi-Kills</h3>
+    <div class="flexbreak"></div>
+    <div id="multi-kills-chart-1"></div>
+    <div id="multi-kills-chart-2"></div>
   </div>
 </template>
 
@@ -141,70 +138,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h3 {
-  margin: 0 0 0 -60px;
-}
-
-.player-dmg {
+.multi-kills {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
+  margin-bottom: 1rem;
 
-  .team-1 {
-    margin-left: -60px;
+  .flexbreak {
+    flex-basis: 100%;
+    margin-bottom: 2rem;
+    height: 0;
+  }
+
+  h3 {
+    margin: 1rem auto -1rem;
+  }
+
+  #multi-kills-chart-1,
+  #multi-kills-chart-2 {
+    flex-basis: 50%;
   }
 }
 
-@media screen and (max-width: 768px) {
-  .player-dmg {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    transform: scale(.7);
-    margin-top: -100px;
+@media (max-width: 1200px) {
+  .multi-kills {
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 0 0 0 0;
+    overflow: hidden;
 
-    .team-1 {
-      margin-top: -50px;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
-      margin-left: -60px;
-    }
-  }
-}
-
-@media screen and (max-width: 991px) and (min-width: 678px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.8);
-    margin-top: -50px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
-    }
-  }
-}
-
-@media screen and (max-width: 1261px) and (min-width: 991px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.9);
-    margin-top: -30px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
+    #multi-kills-chart-1,
+    #multi-kills-chart-2 {
+      flex-basis: 100%;
+      margin: 2rem 0 0 0;
+      overflow: scroll;
     }
   }
 }