diff --git a/simple-page-layout.typ b/simple-page-layout.typ
index a7df330..19c40be 100644
--- a/simple-page-layout.typ
+++ b/simple-page-layout.typ
@@ -16,20 +16,55 @@
 #let simple-page(gen-table-of-contents: true, gen-index-ref: true, content) = {
   core-page-style[
   #if is-web {
+    let off = 3;
+
     table(
       stroke: none,
       columns: (25%, 50%, 25%),
-      column-fixed(
+      
+      html-style(class:"sidebar", "", column-fixed(
         [#if gen-table-of-contents { [#table-of-contents()] }],
         min-pdf-link("Minimal PDF Version"),
         [#if gen-index-ref {[
            #context br()
            #context html-href("index.html")[#html-bold[Website Home]]
-        ]}]
-      ),
+        ]}],
+
+        [#context if is-html() {
+          html.elem("style", "
+            @media only screen and (max-width: 1200px) {
+              .sidebar {
+                display: none !important;
+              }
+
+              .column-fixed {
+                width: 0% !important;
+              }
+
+              .body-column {
+                left: "+str(off)+"% !important;
+              }
+            }
+
+            @media only screen and (max-width: 1800px) {
+              .body-column > span {
+                width: 75% !important;
+              }
+            }
+
+            @media only screen and (max-width: 1200px) {
+              .body-column {
+                width: "+str(100-off)+"% !important;
+              }
+              .body-column > span {
+                width: 100% !important;
+              }
+            }
+          ")
+        }],
+      )),
       [
-        #let off = 3;
-        #html-style("position: absolute; left: "+str(25+off)+"%; width: "+str(75-off)+"%")[
+        #html-style(class:"body-column","position: absolute; left: "+str(25+off)+"%; width: "+str(75-off)+"%")[
           #box(width: 50%, content)
         ]
       ],