diff --git a/style/main.css b/style/main.css
index ad5b3718cf44aefdd1d992967b2502d73bea1cb8..f8a856ad8141b61d66cf8ff44eaae58ce2e3ced8 100644
--- a/style/main.css
+++ b/style/main.css
@@ -337,7 +337,7 @@ hr {
     background: #edcf72;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
     font-size: 45px; }
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-128 .tile-inner {
         font-size: 25px; } }
   .tile.tile-256 .tile-inner {
@@ -345,7 +345,7 @@ hr {
     background: #edcc61;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
     font-size: 45px; }
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-256 .tile-inner {
         font-size: 25px; } }
   .tile.tile-512 .tile-inner {
@@ -353,7 +353,7 @@ hr {
     background: #edc850;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
     font-size: 45px; }
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-512 .tile-inner {
         font-size: 25px; } }
   .tile.tile-1024 .tile-inner {
@@ -361,7 +361,7 @@ hr {
     background: #edc53f;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
     font-size: 35px; }
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-1024 .tile-inner {
         font-size: 15px; } }
   .tile.tile-2048 .tile-inner {
@@ -369,14 +369,14 @@ hr {
     background: #edc22e;
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
     font-size: 35px; }
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-2048 .tile-inner {
         font-size: 15px; } }
   .tile.tile-super .tile-inner {
     color: #f9f6f2;
     background: #3c3a32;
     font-size: 30px; }
-    @media screen and (max-width: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-super .tile-inner {
         font-size: 10px; } }
 
@@ -490,7 +490,7 @@ hr {
 .game-explanation {
   margin-top: 50px; }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 520px) {
   html, body {
     font-size: 15px; }
 
diff --git a/style/main.scss b/style/main.scss
index 307a56f29fb2ba76664fbcf63fc7b51887d23e6f..1ec515e1a72123fcd88c9e7994223b5328a0f4a5 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -7,6 +7,8 @@ $grid-row-cells: 4;
 $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
 $tile-border-radius: 3px;
 
+$mobile-threshold: $field-width + 20px;
+
 $text-color: #776E65;
 $bright-text-color: #f9f6f2;
 
@@ -379,13 +381,13 @@ hr {
         font-size: 45px;
 
         // Media queries placed here to avoid carrying over the rest of the logic
-        @include smaller(480px) {
+        @include smaller($mobile-threshold) {
           font-size: 25px;
         }
       } @else if $power >= 1000 {
         font-size: 35px;
 
-        @include smaller(480px) {
+        @include smaller($mobile-threshold) {
           font-size: 15px;
         }
       }
@@ -401,7 +403,7 @@ hr {
 
     font-size: 30px;
 
-    @include smaller(480px) {
+    @include smaller($mobile-threshold) {
       font-size: 10px;
     }
   }
@@ -452,7 +454,7 @@ hr {
   margin-top: 50px;
 }
 
-@include smaller(480px) {
+@include smaller($mobile-threshold) {
   // Redefine variables for smaller screens
   $field-width: 280px;
   $grid-spacing: 10px;