diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss
index f0eb1fc..31b7580 100644
--- a/assets/sass/_vars.scss
+++ b/assets/sass/_vars.scss
@@ -28,4 +28,4 @@ $errorText: darken($error, 30%);
 $errorColor: desaturate($errorText, 50%);
 
 // Responsivity
-$menuLayoutSwitchTreshold: 700px;
+$mobileThreshold: 632px;
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index e05bbcb..5a00bff 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -183,7 +183,7 @@ body > header {
 		}
 	}
 
-	@media (max-width: $menuLayoutSwitchTreshold) {
+	@media (max-width: $mobileThreshold) {
 		flex-direction: row-reverse;
 
 		.logo {
@@ -246,7 +246,7 @@ body > header {
 		}
 	}
 
-	@media (min-width: $menuLayoutSwitchTreshold) {
+	@media (min-width: $mobileThreshold) {
 		nav ul li {
 			a, button, .button {
 				@include tip;
@@ -274,7 +274,7 @@ footer {
 
 main {
 	flex: 1;
-	padding: 8px;
+	padding: 8px 0;
 
 	button, .button {
 		@include tip;
@@ -649,10 +649,22 @@ button, .button {
 	text-align: center;
 }
 
-.container {
+@mixin container {
+	width: $mobileThreshold;
 	padding: 0 16px;
-	max-width: 632px;
-	margin: 0 auto;
+
+	@media (min-width: $mobileThreshold) {
+		margin: 0 auto;
+	}
+
+	@media (max-width: $mobileThreshold) {
+		width: 100%;
+		padding: 0 8px;
+	}
+}
+
+.container {
+	@include container;
 }
 
 .panel {