diff --git a/docs/src/components/TheHeader.vue b/docs/src/components/TheHeader.vue
index d9a69e41..116a807e 100644
--- a/docs/src/components/TheHeader.vue
+++ b/docs/src/components/TheHeader.vue
@@ -7,10 +7,10 @@ const emit = defineEmits(['menu-click'])
 </script>
 
 <template>
-  <header py-2 lg:px-4 main-bg mx-auto>
+  <header py-2 px-4 main-bg mx-auto>
     <nav flex my-3 gap-x-4 justify-end items-center>
       <a v-if="isMobile && showMenu" cursor-pointer text-2xl i-mdi-menu @click="emit('menu-click')" />
-      <h1 font-playfair mr-auto text-4xl dark:text-brand>
+      <h1 v-if="showMenu" font-playfair mr-auto text-4xl dark:text-brand>
         <a href="/">Dozzle</a>
       </h1>
       <slot />
diff --git a/docs/src/styles/main.css b/docs/src/styles/main.css
index 1f38121e..d5496846 100755
--- a/docs/src/styles/main.css
+++ b/docs/src/styles/main.css
@@ -14,3 +14,10 @@ a:not(header *):not(nav *) {
 header > nav > a {
   @apply  hover:text-teal-600 transition duration-200 ease-in-out ;
 }
+
+@screen lt-sm {
+  pre {
+    overflow-x: auto;
+    width: calc(100vw - 3rem);
+  }
+}