diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css
index 2cbead34f..fc732d56b 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 */
@@ -288,7 +287,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
   --prose-header-text-weight: 600;
   --slider-color: ;
   --table-radius: var(--radius-lg);
-  --button-large-padding: 2px 10px;
+  --button-large-padding: 2px 6px;
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
diff --git a/javascript/black-orange.css b/javascript/black-orange.css
index dfc6f8753..00b6ee96c 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;
@@ -298,7 +297,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
   --prose-header-text-weight: 600;
   --slider-color: ;
   --table-radius: var(--radius-lg);
-  --button-large-padding: 2px 10px;
+  --button-large-padding: 2px 6px;
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index 1918dfda5..899d74a42 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;
@@ -39,7 +38,7 @@ html { font-size: var(--font-size); font-family: var(--font); }
 body, button, input, select, textarea { font-family: var(--font); }
 button { font-size: 1.2rem; max-width: 400px; }
 img { background-color: var(--background-color); }
-input[type=range] { height: var(--line-sm) !important; appearance: none !important; margin-top: 0 !important; min-width: 160px !important;
+input[type=range] { height: var(--line-sm) !important; appearance: none !important; margin-top: 0 !important; min-width: 100% !important;
   background-color: var(--background-color) !important; width: 100% !important; background: transparent !important; }
 input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: var(--line-sm) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important;
   background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid #222222 !important; }
@@ -290,7 +289,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p
   --prose-header-text-weight: 400;
   --slider-color: ;
   --table-radius: var(--radius-lg);
-  --button-large-padding: 2px 10px;
+  --button-large-padding: 2px 6px;
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
diff --git a/javascript/invoked.css b/javascript/invoked.css
index 0b540955b..d5ad34799 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;
@@ -282,7 +281,7 @@ button.selected {background: var(--button-primary-background-fill);}
   --prose-header-text-weight: 600;
   --slider-color: ;
   --table-radius: var(--radius-lg);
-  --button-large-padding: 2px 10px;
+  --button-large-padding: 2px 6px;
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
diff --git a/javascript/light-teal.css b/javascript/light-teal.css
index 52e540cfc..4d12778ea 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;
@@ -174,7 +173,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
   --button-cancel-border-color: #dc2626;
   --button-cancel-text-color-hover: var(--button-cancel-text-color);
   --button-cancel-text-color: white;
-  --button-large-padding: 2px 10px;
+  --button-large-padding: 2px 6px;
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css
index 32447c564..cd818cf00 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;
@@ -287,7 +286,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
   --prose-header-text-weight: 600;
   --slider-color: ;
   --table-radius: var(--radius-lg);
-  --button-large-padding: 2px 10px;
+  --button-large-padding: 2px 6px;
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index 32e9edecd..47a4d3cec 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -277,5 +277,26 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
   --spacing-sm: 3px;
   --spacing-lg: 4px;
   --spacing-xl: 5px;
-  --spacing-xxl: 6px;
+  --spacing-xxl: 6px; 
+}
+
+/* Apply different styles for devices with coarse pointers */
+
+@media (hover: none) and (pointer: coarse) {
+
+  /* Screens 400px and smaller */
+  @media (max-width: 425px) {
+    :root, .light, .dark { --left-column: 100%; }
+    #settings {display: flex;gap: var(--layout-gap);flex-wrap: wrap;flex-direction: row;}
+    .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; }
+  }
+
+  /* Screens 400px and larger up to 1080px  */
+  @media (max-width: 1080px) and (min-width:425px) {
+    :root, .light, .dark { --left-column: 39%; }
+    #scripts_alwayson_txt2img div { max-width: 99%; }
+    #settings {display: flex;gap: var(--layout-gap);flex-wrap: wrap;flex-direction: row;}
+    .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; }
+  }  
+  
 }