Use full width on small screens

Fraenkiman · Fraenkiman · commit e2258bf4b522 · 2023-08-03T00:16:22.000+02:00
Mobile devices are increasingly replacing the classic PC.
So it is all the more important to make the theme and the administration area more accessible for today's mobile devices.
- With a screen width of up to 768px, the full width is utilized.
- The theme is no longer compressed vertically on small screens from 720px to 768px.
diff --git a/fp-interface/themes/leggero/leggero-v2/res/admin.css b/fp-interface/themes/leggero/leggero-v2/res/admin.css
@@ -14,12 +14,8 @@ Module: admin.css
 @import url(globals.css);
 
 /* ===== VARIOUS ===== */
-@media screen and (max-device-width: 768px){
-  #body-container {
-	-webkit-text-size-adjust: none;
-	-moz-text-size-adjust: none;
-	text-size-adjust: none
-  }
+@viewport {
+   width: device-width
 }
 
 .buttonbar input {
@@ -618,3 +614,15 @@ a.link-general:hover, .main-cell a:hover {
 form {
     margin: auto
 }
+
+/* ===== Smartphone and Tablet ===== */
+@media screen and (max-device-width: 768px) {
+	body { margin: 0 0 0 0; background: #eee }
+
+	#body-container {
+		min-width: 100%;
+		-webkit-text-size-adjust: none;
+		-moz-text-size-adjust: none;
+		text-size-adjust: none
+	}  		
+}
diff --git a/fp-interface/themes/leggero/leggero-v2/res/common.css b/fp-interface/themes/leggero/leggero-v2/res/common.css
@@ -229,6 +229,16 @@ h4 { font-size: 1.2em }
 		max-width: 460px !IMPORTANT;
 		width: 100%
 	}
+
+	@media screen and (max-device-width: 768px) { /* Smartphone and Tablet */
+		body { margin: 0 0 0 0 }
+
+		#body-container { max-width: 758px }
+
+		#main { width: 56% }
+
+		#column { width: 30% !IMPORTANT }
+	}
 }
 
 /* ===== RESPONSIVE DESIGN ===== */
