diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css
index 2cbead34f..b9447b038 100644
--- a/javascript/amethyst-nightfall.css
+++ b/javascript/amethyst-nightfall.css
@@ -2,7 +2,6 @@
 :root {
   --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', sans-serif;
   --font-size: 16px;
-  --left-column: 500px;
   --highlight-color: #8a3df6; /* Purple color */
   --inactive-color: #404040; /* Darker shade of gray */
   --background-color: #000000; /* Black */
diff --git a/javascript/black-orange.css b/javascript/black-orange.css
index dfc6f8753..d2e1e6a6d 100644
--- a/javascript/black-orange.css
+++ b/javascript/black-orange.css
@@ -4,7 +4,6 @@
   --font: 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
-  --left-column: 500px;
   --highlight-color: #ce6400;
   --inactive-color: #4e1400;
   --background-color: #000000;
diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index 1918dfda5..df25a1d34 100644
--- a/javascript/black-teal.css
+++ b/javascript/black-teal.css
@@ -4,7 +4,6 @@
   --font: 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
-  --left-column: 500px;
   --primary-50: #7dffff;
   --primary-100: #72e8e8;
   --primary-200: #67d2d2;
diff --git a/javascript/invoked.css b/javascript/invoked.css
index 0b540955b..5564a5a0c 100644
--- a/javascript/invoked.css
+++ b/javascript/invoked.css
@@ -3,7 +3,6 @@
   --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
-  --left-column: 500px;
   --primary-100: #2b303b;
   --primary-200: #15181e;
   --primary-300: #0a0c0e;
diff --git a/javascript/light-teal.css b/javascript/light-teal.css
index 52e540cfc..89473db42 100644
--- a/javascript/light-teal.css
+++ b/javascript/light-teal.css
@@ -4,7 +4,6 @@
   --font: 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
-  --left-column: 500px;
   --primary-50: #7dffff;
   --primary-100: #72e8e8;
   --primary-200: #67d2d2;
diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css
index 32447c564..25e00c64c 100644
--- a/javascript/midnight-barbie.css
+++ b/javascript/midnight-barbie.css
@@ -3,7 +3,6 @@
   --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
   --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
   --font-size: 14px;
-  --left-column: 500px;
   --highlight-color: #ff00f2;
   --inactive-color: #005485;
   --background-color: #000000;
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index 32e9edecd..29170931d 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -279,3 +279,12 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
   --spacing-xl: 5px;
   --spacing-xxl: 6px;
 }
+
+
+/* Apply different styles for devices with coarse pointers */
+@media (hover: none) and (pointer: coarse) {
+    :root, .light, .dark { 
+    	--left-column: 100%;
+    }
+    .gradio-slider input[type="number"] { text-align: center; }
+}