proper mobile centering

ui/static/ui/achievement.css

@@ -14,7 +14,7 @@
     animation-fill-mode: forwards;
 }
 
-.achievements-list {
+.achievment-column {
     height: 100%;
     overflow: auto;
     text-align: center;
@@ -24,6 +24,12 @@
     font-size: 4rem;
 }
 
+@media only screen and (max-width: 768px) {
+    .achievment-column {
+        height: 50%;
+    }
+}
+
 @keyframes moveup {
     from {bottom: 0px;}
     to {bottom: 200px; color: white;}

ui/static/ui/button.css

@@ -8,7 +8,6 @@ html, body {
 }
 
 .columns {
-    width: 100%;
     height: 100%;
 }
 
@@ -21,6 +20,13 @@ html, body {
     height: 100%;
 }
 
+@media only screen and (max-width: 768px) {
+    .button-column {
+        height: 50%;
+    }
+}
+
+
 .button-container {
     position: absolute;
 }

ui/static/ui/button.js

@@ -3,7 +3,8 @@ const button = document.getElementById("BUTTON");
 const count = document.getElementById("COUNT");
 const button_container = document.getElementById("button-container");
 const achievement = document.getElementById("achievement");
-const achievement_list = document.getElementById("achievement-list")
+const achievement_list = document.getElementById("achievement-list");
+const achievement_column = document.getElementById("achievement-column");
 
 function add_achievement(text) {
     if (text != undefined) {
@@ -16,7 +17,7 @@ function add_achievement(text) {
         elem.innerText = text;
         achievement_list.appendChild(elem);
 
-        achievement_list.scrollTo(0, achievement_list.scrollHeight);
+        achievement_column.scrollTo(0, achievement_list.scrollHeight);
     }
 }
 

ui/templates/ui/button.html

@@ -34,7 +34,7 @@
                 </div>
             </div>
         </div>
-        <div class="column achievment-column">
+        <div class="column achievment-column" id = "achievement-column">
             <div class="achievements-list" id="achievement-list">
                 <h1 class="title">Achievements</h1>
                 {% for key,value in achievement.items %}