diff --git a/favicon.png b/favicon.png
index 520c6c7..9d59c1e 100644
Binary files a/favicon.png and b/favicon.png differ
diff --git a/index.css b/index.css
index 0cb6773..0b9acd0 100644
--- a/index.css
+++ b/index.css
@@ -30,12 +30,6 @@ p {
 	width: 2em;
 }
 
-@media screen and (max-height: 450px) {
-	#character {
-		font-size: 20vh;
-	}
-}
-
 #equivalent {
 	font-size: 20px;
 	width: 10em;
@@ -91,28 +85,6 @@ p {
 	margin-top: 15px;
 }
 
-@media screen and (max-height: 450px) {
-	#user_answer * {
-		height: 6vw;
-		line-height: 5.5vw;
-		min-height: auto;
-	}
-}
-
-@media screen and (max-width: 450px) {
-	#user_answer * {
-		width: 12vw;
-	}
-	#answer_field {
-		width: 50vw;
-	}
-	#correct_answer {
-		font-size: 5vw;
-		height: auto;
-		width: 70vw;
-	}
-}
-
 #settings {
 	margin-top: 10px;
 }
@@ -148,3 +120,33 @@ p {
 	margin-left: auto;
 	margin-right: auto;
 }
+
+
+@media screen and (max-width: 450px) {
+	#user_answer * {
+		width: 12vw;
+	}
+	#answer_field {
+		width: 50vw;
+	}
+	#correct_answer {
+		font-size: 5vw;
+		height: auto;
+		width: 70vw;
+	}
+}
+
+@media screen and (max-height: 650px) {
+	#user_answer * {
+		height: 8vh;
+		line-height: 7.5vh;
+		min-height: auto;
+		font-size: 5vh;
+	}
+	#character {
+		font-size: 12vh;
+	}
+	#equivalent, #correct_answer {
+		font-size: 4vh;
+	}
+}
diff --git a/index.html b/index.html
index fb36d36..60c51ba 100644
--- a/index.html
+++ b/index.html
@@ -24,13 +24,13 @@
 						<input type="text" class="form-control form-control-sm" id="answer_field" placeholder="type..." autofocus="autofocus">
 						<p style="color: red" id="negative">0</p>
 					</div>
-					<div class="row" id="submit_answer">
-						<button class="col btn btn-lg btn-outline-success" id="answer_btn">answer</button>
-						<button class="col btn btn-lg btn-outline-info" id="next_btn">next</button>
-					</div>
 					<div class="row" id="correct_answer" style="display: none;">
 						<p id="answer_paragraph">the answer was</p>
 					</div>
+					<div class="row" id="submit_answer">
+						<button class="col btn btn-lg btn-outline-success" id="answer_btn">answer</button>
+						<button class="col btn btn-lg btn-outline-info" id="next_btn" style="display: none;">next</button>
+					</div>
 				</div>
 			</div>
 			<div class="row" id="settings">
diff --git a/index.js b/index.js
index ebc99bb..5a33ce5 100644
--- a/index.js
+++ b/index.js
@@ -14,6 +14,10 @@ $(function() {
 function changeQuestion() {
 	$("#answer_field").val("") // Empty field so user doesn't have to do it
 	$("#answer_field").focus() // Focus on field so user doesn't have to do it
+	$("#answer_btn").attr("disabled", false)
+	$("#answer_btn").css("display", "block")
+	$("#next_btn").css("display", "none")
+	$("#next_btn").html("skip")
 
 	let questionShape = shapeQuestion(
 		[$("#hq:checked").length, $("#kq:checked").length, $("#rq:checked").length],
@@ -124,6 +128,7 @@ function checkCharacters() {
 }
 
 function checkAnswer() {
+	$("#answer_field").focus() // Keey keyboard on for mobile users
 	if (!$("#answer_field").val()) {return}
 	if ($("#answer_field").css("backgroundColor") === "rgb(255, 0, 0)") {
 		$("#equivalent").css("fontSize", "25px")
@@ -144,5 +149,9 @@ function checkAnswer() {
 	} else {
 		$("#correct_answer").css("visibility", "visible")
 		$("#correct_answer").slideDown(100)
+		$("#answer_btn").attr("disabled", true)
+		$("#answer_btn").css("display", "none")
+		$("#next_btn").html("next")
+		$("#next_btn").css("display", "block")
 	}
 }