diff --git a/docs-site/src/components/pattern-lab-utils/docs.twig b/docs-site/src/components/pattern-lab-utils/docs.twig
index 2a8d04e7ca..70d6ee6f5d 100644
--- a/docs-site/src/components/pattern-lab-utils/docs.twig
+++ b/docs-site/src/components/pattern-lab-utils/docs.twig
@@ -85,13 +85,13 @@
       </script>
       <bolt-component-explorer schema-uuid="schema-{{ schemaUUID }}" initial-layout="{{ schemaForm.layout }}" template="{{ schemaForm.template }}" form-data="{{ schemaForm.initialData | json_encode() | escape('html_attr') }}">
         <replace-with-children style="background-color: #F6F6F9; display: flex; margin: 0 auto; max-width: 1024px; min-height: 320px; -webkit-overflow-scroll': 'touch'">
-          <replace-with-children class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-6/10"
+          <replace-with-children class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-1/1 u-bolt-width-6/10@xsmall"
             style="background-color: #FFF; border: 1px solid rgba(0, 0, 0, .075); display: flex; position: relative;">
             <replace-with-children class="u-bolt-padding-medium c-bds-component-explorer__demo-container" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-shadow: inset rgba(0, 0, 0, 0.1) 0px 0px 30px;">
               Loading...
             </replace-with-children>
           </replace-with-children>
-          <replace-with-children class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-4/10" style="flex-basis: 200px; overflow: visible; margin-left: auto; position: relative; display: flex;">
+          <replace-with-children class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-1/1 u-bolt-width-4/10@xsmall" style="flex-basis: 200px; overflow: visible; margin-left: auto; position: relative; display: flex;">
             <replace-with-children style="-webkit-overflow-scroll: touch; padding: 0.5rem; border: 1px solid #d8d8da; width: 100%;">
               {# <bolt-schema-form></bolt-schema-form> #}
             </replace-with-children>
diff --git a/docs-site/src/components/schema-form/component-explorer.js b/docs-site/src/components/schema-form/component-explorer.js
index 2620aae86f..31199e972d 100644
--- a/docs-site/src/components/schema-form/component-explorer.js
+++ b/docs-site/src/components/schema-form/component-explorer.js
@@ -138,7 +138,7 @@ export default class ComponentExplorer extends withContext(withLitHtml()) {
         backgroundColor: '#F6F6F9',
         margin: '0 auto',
       })}">
-        <div class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-6/10"
+        <div class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-1/1 u-bolt-width-6/10@xsmall"
           style="${styleMap({
             backgroundColor: '#FFF',
             border: '1px solid rgba(0, 0, 0, .075)',
@@ -150,7 +150,7 @@ export default class ComponentExplorer extends withContext(withLitHtml()) {
           </div>
         </div>
         <div
-          class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-4/10"
+          class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-1/1 u-bolt-width-4/10@xsmall"
           style="${styleMap({
             flexBasis: '200px',
             overflow: 'visible',