css fix for posts page

Prototypr · Jul 1, 2024 · e9be2e2 · e9be2e2
1 parent 321455a
commit e9be2e2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/components/layoutForBlogPost.jsx b/components/layoutForBlogPost.jsx
@@ -24,11 +24,11 @@ export default function Layout({
       </div>
 
       <div
-        className={`min-h-screen overflow-x-hidden md:overflow-x-visible ${NAV_OFFSET} ${padding == false ? "" : "px-3 md:px-8"}`}
+        className={`min-h-screen overflow-x-hidden md:overflow-x-visible  ${padding == false ? "" : "px-3 md:px-8"}`}
         style={{ background: background ? background : "#fbfcff" }}
       >
         <main
-          className="mx-auto "
+          className={`mx-auto ${NAV_OFFSET} overflow-hidden `}
           //   style={{ maxWidth: padding == false ? "" : "1200px" }}
         >
           {children}

diff --git a/styles/posts-page.scss b/styles/posts-page.scss
@@ -520,23 +520,6 @@ figure, pre{
   }
  }
 
-@media only screen and (max-width: 600px) {
-    figure{
-        max-width:100%!important;
-        img{
-            max-width:100%!important;
-        }
-    }
-    iframe{
-        max-width: 100%!important;
-    }
-    .max-w-full{
-        max-width: 100%!important;
-        // max-width: 50rem!important;
-        margin-left: 0rem!important;
-    }
-  }
-
   .blog-page .blog-content video {
     width: 100%;
  }
@@ -800,4 +783,25 @@ figure, pre{
         list-style:disc;
         padding-left: 0.25rem;
     }
-}
+}
+
+@media only screen and (max-width: 600px) {
+    figure{
+        max-width:100%!important;
+        img{
+            max-width:100%!important;
+        }
+    }
+
+    iframe{
+        max-width: 100%!important;
+    }
+    .blog-content figcaption, .blog-content iframe{
+        max-width: 100%!important;
+    }
+    .max-w-full{
+        max-width: 100%!important;
+        // max-width: 50rem!important;
+        margin-left: 0rem!important;
+    }
+  }