From cded42ef135a57f7496b51e3a6686fbef4067e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Thu, 23 Jan 2020 10:11:24 +0100
Subject: [PATCH] Styling for elements on the landingpage

---
 src/components/VinlottisPage.vue |  7 ++++++-
 src/ui/TotalBought.vue           | 12 ++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 8e277a9..34099ef 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -65,6 +65,11 @@ export default {
 
 .left-bottom {
   width: 75%;
+
+  @include mobile {
+    padding: 0 1.25rem;
+    width: 100%;
+  }
 }
 
 .bought-and-highscore-separator {
@@ -180,7 +185,7 @@ h1 {
     justify-content: center;
     align-items: center;
 
-    padding-top: 0;
+    padding: 0;
     margin-top: 30px;
   }
 
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index 90a766f..d24d43e 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -106,6 +106,12 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+
+  @include mobile {
+    flex-direction: row;
+    justify-content: unset;
+    align-items: center;
+  }
 }
 
 .number-container {
@@ -120,6 +126,12 @@ export default {
 
 .inner-text-container {
   padding-left: 5px;
+
+  // TODO fix styling for displaying in columns
+  @include mobile {
+    margin-top: auto;
+    padding-bottom: 5px;
+  }
 }
 
 .bought-number-span {