diff --git a/docs/src/Style.js b/docs/src/Style.js
index 6d25ee4d36..2f7c9d02f3 100644
--- a/docs/src/Style.js
+++ b/docs/src/Style.js
@@ -1,6 +1,11 @@
 const style = {}
 const sidebarWidth = 250
 
+style.container = {
+  display: 'flex',
+  flexDirection: 'row', // Default value for non-mobile devices
+}
+
 style.menu = {
   position: 'fixed',
   display: 'flex',
@@ -9,8 +14,6 @@ style.menu = {
   bottom: 0,
   left: 0,
   width: sidebarWidth,
-  // match menu background
-  // prevents a white background when items are filtered out by search
   background: '#1B1C1D',
   overflowX: 'hidden',
 }
@@ -25,4 +28,13 @@ style.main = {
   maxWidth: parseInt(sidebarWidth, 10) + 900,
 }
 
+// Manually check the screen size and apply appropriate styles
+const screenWidth = window.innerWidth
+if (screenWidth <= 768) {
+  style.container.flexDirection = 'column'
+  style.menu.position = 'relative'
+  style.menu.width = '100%'
+  style.sidebarMain.marginLeft = '0%'
+}
+
 export default style