fix: main css file

Author: nikhiltidke101

custom-implementation/src/main.css

@@ -1,4 +1,8 @@
 #fern-header,
 #fern-footer {
-  display: none; /* Hide the elements by default */
+  display: block; /* Make the elements visible by default */
+  
+  @media (min-width: 1024px) {
+    display: none; /* Hide the elements on screens larger than 1024px */
+  }
 }

custom-implementation/src/main.tsx

@@ -38,7 +38,7 @@ const render = async () => {
     () => {
       // Once the header component is loaded, make it visible
       const header = document.getElementById('fern-header')
-      if (header) header.style.display = 'block'
+      if (header && window.innerWidth > 1024) header.style.display = 'block'
     },
   )
   ReactDOM.render(