diff --git a/docsite/src/components/FileExample.tsx b/docsite/src/components/FileExample.tsx
index a939073f..53e2786d 100644
--- a/docsite/src/components/FileExample.tsx
+++ b/docsite/src/components/FileExample.tsx
@@ -7,6 +7,7 @@ import { Simulate } from "react-dom/test-utils";
 import { useTypedLocalStorage } from "./useLocalStorage";
 import ButtonGroup from "./ButtonGroup";
 import EditorFetch from '@site/src/components/Schema/SchemaEditorFetch';
+import {useWindowSize} from '@docusaurus/theme-common';
 
 export interface FileProps extends Omit<CodeBlockProps, 'children'> {
     data: string | object
@@ -14,6 +15,7 @@ export interface FileProps extends Omit<CodeBlockProps, 'children'> {
     schemaName?: string
     interactive?: boolean
     defaultDisplay?: 'plain' | 'interactive'
+    readOnlyAtWidth?: number
 }
 
 const FileExample = (props: FileProps) => {
@@ -23,14 +25,19 @@ const FileExample = (props: FileProps) => {
         defaultDisplay = 'interactive',
         schemaName,
         filePathName,
+        readOnlyAtWidth = 1,
         ...rest
     } = props;
 
     const [fileExampleShow, setFileExampleShow] = useTypedLocalStorage('docusaurus.tab.fileExampleShow', defaultDisplay, false);
 
+    const windowSize = useWindowSize({desktopBreakpoint: readOnlyAtWidth});
+
     let displaySwitch = null;
 
-    if (interactive) {
+    const isInteractive = interactive && windowSize === 'desktop'
+
+    if (isInteractive) {
         displaySwitch = (
             <ButtonGroup
                 options={[['plain', 'Plain'], ['interactive', 'Interactive']]}
@@ -44,12 +51,12 @@ const FileExample = (props: FileProps) => {
     }
 
     let fileNameContent = null;
-    if(filePathName !== undefined && (!interactive || fileExampleShow === 'interactive')) {
+    if(filePathName !== undefined && (isInteractive && fileExampleShow === 'interactive')) {
         fileNameContent = <code style={{float: 'right', paddingRight: '0.5em', paddingLeft: '0.5em'}}>{filePathName}</code>
     }
 
     let header = null;
-    if(displaySwitch !== null || filePathName !== null) {
+    if(displaySwitch !== null || fileNameContent !== null) {
         header = (
         <div style={{marginBottom: '1em'}}>
             {displaySwitch}{fileNameContent}
@@ -58,7 +65,7 @@ const FileExample = (props: FileProps) => {
     }
 
     const codeBlockContent = useMemo(() =>{
-        if(interactive && fileExampleShow === 'interactive') {
+        if(isInteractive && fileExampleShow === 'interactive') {
             return null;
         }
         if(typeof data !== 'string') {
@@ -69,8 +76,8 @@ const FileExample = (props: FileProps) => {
 
     return (<Fragment>
         {header}
-        {!interactive || fileExampleShow === 'plain' ? <CodeBlock title={filePathName} language="json5">{codeBlockContent}</CodeBlock> : null}
-        {interactive && fileExampleShow === 'interactive' ? <EditorFetch configContent={data} schemaName={schemaName}/> : null}
+        {!isInteractive || fileExampleShow === 'plain' ? <CodeBlock title={filePathName} language="json5">{codeBlockContent}</CodeBlock> : null}
+        {isInteractive && fileExampleShow === 'interactive' ? <EditorFetch configContent={data} schemaName={schemaName}/> : null}
         </Fragment>
     );
 }
diff --git a/docsite/src/components/GenericConfiguration.mdx b/docsite/src/components/GenericConfiguration.mdx
index 843146a1..07862d38 100644
--- a/docsite/src/components/GenericConfiguration.mdx
+++ b/docsite/src/components/GenericConfiguration.mdx
@@ -5,6 +5,7 @@ import ExplorerFetch from '@site/src/components/Schema/ExplorerFetch';
 import EditorFetch from '@site/src/components/Schema/SchemaEditorFetch';
 import './GenericConfiguration.scss';
 import FileConfigExample from './FileConfigExample';
+import {useWindowSize} from '@docusaurus/theme-common';
 
 <Tabs groupId="configType" queryString>
     <TabItem value="env" label="ENV">
@@ -26,7 +27,8 @@ import FileConfigExample from './FileConfigExample';
             </DetailsAdmo>
                 <ExplorerFetch name={`schemas/${props.config}`} />
             </div>
-            <div className="fileEditor" style={{ flexBasis: 'auto', flexGrow: 3 }}>
+            <div style={{ flexBasis: 'auto', flexGrow: 3 }}>
+            <div className="fileEditor">
             <DetailsAdmo type="note" summary="Config Example">
                 This displays an **example config file** of a <strong children={props.name}/> <span children={props.client ? 'Client' : 'Source'}/> [File Configuration](/configuration?configType=aio#configuration-types) that adheres to the shown **Config Structure**.
 
@@ -37,11 +39,20 @@ import FileConfigExample from './FileConfigExample';
 
                 After you finish editing, switch to **text** and then copy all text to get a completed config.
             </DetailsAdmo>
+            </div>
+            <div className="fileEditorMobile">
+                <DetailsAdmo type="warning" summary="Config Example Mobile Experience">
+                    This displays an **example config file** of a <strong children={props.name}/> <span children={props.client ? 'Client' : 'Source'}/> [File Configuration](/configuration?configType=aio#configuration-types) that adheres to the shown **Config Structure**.
+
+                    The example config file editor is meant for a larger screen experience so **only the read-only example is shown.** Please use this site on a tablet/laptop/desktop to enable file editor features.
+                </DetailsAdmo>
+            </div>
             <FileConfigExample 
                 filePathName={`CONFIG/${props.name}.json`}
                 configureAs={props.client ? 'client' : 'source'} 
                 data={props.fileContent}
                 schemaName={props.config}
+                readOnlyAtWidth={500}
              />
             </div>
         </div>
@@ -63,7 +74,8 @@ import FileConfigExample from './FileConfigExample';
             </DetailsAdmo>
                 <ExplorerFetch name={`schemas/aio`} />
             </div>
-             <div className="fileEditor" style={{ flexBasis: 'auto', flexGrow: 3 }}>
+             <div style={{ flexBasis: 'auto', flexGrow: 3 }}>
+             <div className="fileEditor">
                 <DetailsAdmo type="note" summary="Config Example">
                     This displays an **example config file** of a [all-in-one (`config.json`) configuration](/configuration?configType=aio#configuration-types) that includes a <strong children={props.name}/> <span children={props.client ? 'Client' : 'Source'}/> that adheres to the shown **Config Structure**.
 
@@ -74,12 +86,21 @@ import FileConfigExample from './FileConfigExample';
 
                     After you finish editing, switch to **text** and then copy all text to get a completed config.
                 </DetailsAdmo>
+            </div>
+            <div className="fileEditorMobile">
+                <DetailsAdmo type="warning" summary="Config Example Mobile Experience">
+                    This displays an **example config file** of a [all-in-one (`config.json`) configuration](/configuration?configType=aio#configuration-types) that includes a <strong children={props.name}/> <span children={props.client ? 'Client' : 'Source'}/> that adheres to the shown **Config Structure**.
+                
+                    The example config file editor is meant for a larger screen experience so **only the read-only example is shown.** Please use this site on a tablet/laptop/desktop to enable file editor features.
+                </DetailsAdmo>
+            </div>
                 <FileConfigExample 
                     filePathName={`CONFIG/config.json`}
                     configureAs={props.client ? 'client' : 'source'} 
                     data={props.fileContent}
                     schemaName="aio"
                     name={props.name}
+                    readOnlyAtWidth={500}
                     aio
                 />
             </div>
diff --git a/docsite/src/components/GenericConfiguration.scss b/docsite/src/components/GenericConfiguration.scss
index 1e76e977..527c9c18 100644
--- a/docsite/src/components/GenericConfiguration.scss
+++ b/docsite/src/components/GenericConfiguration.scss
@@ -6,6 +6,10 @@
     column-gap: 1em;
 }
 
+.fileEditorMobile {
+  display: none;
+}
+
 @media screen and (max-width: 1378px) {
   .schemaWrapper {
     flex-direction: column;
@@ -16,4 +20,7 @@
   .fileEditor {
     display: none;
   }
+  .fileEditorMobile {
+    display: block
+  }
 }
\ No newline at end of file
diff --git a/docsite/src/components/Playground.scss b/docsite/src/components/Playground.scss
index 729a41db..80236a00 100644
--- a/docsite/src/components/Playground.scss
+++ b/docsite/src/components/Playground.scss
@@ -6,6 +6,10 @@
     column-gap: 1em;
 }
 
+.fileEditorMobile2 {
+  display: none;
+}
+
 @media screen and (max-width: 1280px) {
   .schemaWrapper2 {
     flex-direction: column;
@@ -16,4 +20,7 @@
   .fileEditor2 {
     display: none;
   }
+  .fileEditorMobile2 {
+    display: block
+  }
 }
\ No newline at end of file
diff --git a/docsite/src/components/PlaygroundInner.tsx b/docsite/src/components/PlaygroundInner.tsx
index 9fafea18..6b879dc4 100644
--- a/docsite/src/components/PlaygroundInner.tsx
+++ b/docsite/src/components/PlaygroundInner.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react"
 import BrowserOnly from "@docusaurus/BrowserOnly"
-import {useColorMode} from '@docusaurus/theme-common';
+import {useColorMode, useWindowSize} from '@docusaurus/theme-common';
+import CodeBlock from '@theme/CodeBlock';
 
 import Schema from "@site/static/schemas/aio.json";
 import ConfigExample from "@site/static/configExample.json";
@@ -33,6 +34,7 @@ function PlaygroundInner(): JSX.Element {
     // colorModeChoice, // the color mode chosen by the user, can be null
     // setColorMode, // set the color mode chosen by the user
   } = useColorMode();
+  const windowSize = useWindowSize({desktopBreakpoint: 500});
 
     const [data, setData] = useState<Content>({json: ConfigExample });
 
@@ -45,17 +47,18 @@ function PlaygroundInner(): JSX.Element {
                     <p>Use this to understand how to write a valid config.</p>
                 </DetailsAdmo>
                 <JsonSchemaViewer
-  name="Todos Model"
-  schema={Schema}
-  expanded={false}
-  hideTopBar={false}
-  renderRootTreeLines={true}
-  emptyText="No schema defined"
-  defaultExpandedDepth={0}
-  markup
-/>
+                name="Todos Model"
+                schema={Schema}
+                expanded={false}
+                hideTopBar={false}
+                renderRootTreeLines={true}
+                emptyText="No schema defined"
+                defaultExpandedDepth={0}
+                markup
+                />
                 </div>
-                <div className="fileEditor2" style={{ flexBasis: 'auto', flexGrow: 3 }}>
+                <div style={{ flexBasis: 'auto', flexGrow: 3 }}>
+                    <div className="fileEditor2">
                     <DetailsAdmo type="note" summary="Config Example">
                     <p>
                         This displays an <strong>example config file</strong> of a <a href="/configuration?configType=aio#configuration-types">all-in-one (<code>config.json</code>) configuration</a>  that adheres to the shown <strong>Config Structure.</strong>
@@ -74,15 +77,29 @@ function PlaygroundInner(): JSX.Element {
 
                     <p>After you finish editing, switch to <strong>text</strong> and then copy all text to get a completed config.</p>
                 </DetailsAdmo>
-    <ReactJsonEditor 
+                </div>
+                <div className="fileEditorMobile2">
+                <DetailsAdmo type="warning" summary="Config Example Mobile Experience">
+                    <p>
+                        This displays an <strong>example config file</strong> of a <a href="/configuration?configType=aio#configuration-types">all-in-one (<code>config.json</code>) configuration</a>  that adheres to the shown <strong>Config Structure.</strong>
+                    </p>
+                    <p>
+                        The example config file editor is meant for a larger screen experience so <strong>only the read-only example is shown.</strong> Please use this site on a tablet/laptop/desktop to enable file editor features.
+                    </p>
+                </DetailsAdmo>
+                </div>
+                {windowSize === 'mobile' ? (<CodeBlock title={`CONFIG/config.json`} language="json5">{JSON.stringify(data, null, 2)}</CodeBlock>) : (
+                        <ReactJsonEditor 
     validator={validator} 
     theme={colorMode} 
     content={data}
+    mode="text"
     style={{height: 'initial'}}
      />
-               
+                )}
                 </div>
             </div>
+            
     )
 }