diff --git a/styleguide.css b/styleguide.css
index a79c738..03770d0 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1142,6 +1142,11 @@ section + section {
       width: 100%;
     }
 
+    #component-slider .sg-form-preview-area {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
     #component-slider .sg-state-example > :last-child {
       width: 100%;
       min-width: 0;
@@ -1160,6 +1165,11 @@ section + section {
       grid-column: 2;
     }
 
+    #component-slider .sg-state-example > .sg-slider-row,
+    #component-slider .sg-activatable-row .sg-slider-row {
+      max-width: var(--layout-input-field-max-width);
+    }
+
     #component-slider .sg-slider-row .sg-slider-value {
       min-width: 0;
       grid-column: 3;
@@ -1256,6 +1266,12 @@ section + section {
     }
 
     @media (max-width: 48rem) {
+      #component-slider .sg-form-preview-area {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
       #component-slider .sg-state-example {
         grid-template-columns: 1fr;
         align-items: start;