diff --git a/css/style.css b/css/style.css
index de5fd17..2c27b76 100644
--- a/css/style.css
+++ b/css/style.css
@@ -219,6 +219,79 @@
 }
 }
 
+/* tablets */
+@media (max-width: 1000px) {
+	#city-right {
+		padding: 0;
+	}
+	#city-forecast-panel {
+		float: none;
+		width: 100%;
+	}
+}
+@media (max-width: 900px) {
+	#city-right {
+		padding: 0;
+	}
+	#city-forecast-panel {
+		float: none;
+		width: 100%;
+	}
+}
+
+/* breakpoints for horizontal city list and the forecast table */
+@media screen and (max-width: 850px) and (min-width: 600px) {
+	#city-list-left ul.city-list li {
+		min-width: 33%;
+	}
+}
+@media screen and (max-width: 600px) and (min-width: 350px) {
+	#city-list-left ul.city-list li {
+		min-width: 50%;
+	}
+
+	#city-right tr td:nth-of-type(n+4), th:nth-of-type(n+4) {
+		display: none;
+	}
+}
+@media screen and (max-width: 350px) {
+	#city-list-left ul.city-list li {
+		min-width: 100%;
+	}
+	#city-right tr td:nth-of-type(n+5), th:nth-of-type(n+5) {
+		display: none;
+	}
+}
+
+/* smartphones */
+@media screen and (max-width: 850px) and (min-height: 10cm) {
+	#app {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 50px);
+	}
+	#city-list-left {
+		order: 2;
+		width: 100%;
+		flex: min-content;
+	}
+	#city-list-left ul.city-list {
+		flex-direction: row;
+		display: flex;
+	}
+	#city-list-left ul.city-list li {
+		flex: min-content;
+	}
+	#city-list-left ul.city-list li:last-child {
+		flex: auto;
+	}
+	#city-right {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+}
+
 #app {
 	width: 100%;
 }