From 89a8183f00508f456093413b0785aa502a2a953a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Thu, 30 Jan 2020 13:55:35 +0100
Subject: [PATCH] Mobile

---
 src/components/GeneratePage.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index ed1ff58..e7c7c95 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="container">
     <h1 class="title" @click="startCountdown">Loddgenerator</h1>
-    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
+    <p class="subtext">
+      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
+    </p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -52,10 +54,10 @@
     </div>
 
     <div class="color-count-container" v-if="generated && !generating">
-      <span>Rød: {{red}}</span>
-      <span>Blå: {{blue}}</span>
-      <span>Gul: {{yellow}}</span>
-      <span>Grønn: {{green}}</span>
+      <span>Rød: {{ red }}</span>
+      <span>Blå: {{ blue }}</span>
+      <span>Gul: {{ yellow }}</span>
+      <span>Grønn: {{ green }}</span>
     </div>
 
     <Vipps class="vipps" :amount="numberOfBallots" />
@@ -230,6 +232,10 @@ p {
   display: flex;
   font-family: Arial;
   margin-top: 35px;
+
+  @include mobile {
+    width: 80vw;
+  }
 }
 
 .input-line {