From d58149892de14f963b61b38778317065570ee99d Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 3 Jun 2024 22:50:58 -0300
Subject: [PATCH] Change the number of columns depending on the screen size

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index d2d3af947e..aa648a21d1 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1197,7 +1197,20 @@ table.dataTable tbody > tr > .selected {
   background: rgba(127, 127, 127, 0.2);
 }
 
-@media screen and (max-width: 991px) {
+@media screen and (min-width: 2250px) {
+  /* show 3 columns in larger screens */
+  .settings-container {
+    --columns: 3;
+  }
+}
+@media screen and (max-width: 1150px) {
+  /* avoid narrow columns in medium screens with sidebar expanded */
+  body:not(.sidebar-collapse) .settings-container {
+    --columns: 1;
+  }
+}
+@media screen and (max-width: 940px) {
+  /* show 1 columns in smaller screens */
   .settings-container {
     --columns: 1;
   }