changes regarding mobile view

blog/src/components/Header.astro

@@ -39,7 +39,6 @@
   nav {
     width: 100%;
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }
@@ -48,6 +47,17 @@
     font-size: 1.5rem;
     padding-left: 16px;
     color: var(--primary-text);
+    width: fit-content;
+  }
+
+  .nav-left {
+  }
+
+  .nav-right {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    
   }
 
   .nav-right > a {

blog/src/components/PostPreviewLarge.astro

@@ -16,11 +16,7 @@ const img = findImageByPath(post.image.path);
 <a href={url} class="no-link-link">
   <div class="wide-container">
     <div class="image-col col rounded">
-      <Image
+      <Image src={img} alt={post.image.alt} layout="constrained" />
-        src={img}
-        alt={post.image.alt}
-        layout="constrained"
-      />
     </div>
     <div class="text-col col">
       <div class="top-info">
@@ -77,4 +73,18 @@ const img = findImageByPath(post.image.path);
     justify-content: space-between;
     margin-bottom: 16px;
   }
+
+  @media only screen and (max-width: 800px) {
+    .wide-container {
+      flex-direction: column;
+    }
+
+    .col {
+      width: 100%;
+    }
+
+    .image-col img {
+      position: static;
+    }
+  }
 </style>

blog/src/layouts/Grid.astro

@@ -1,3 +0,0 @@
----
-
----

blog/src/styles/global.css

@@ -18,6 +18,7 @@ body {
     flex-direction: column;
     flex: 1;
     padding: 0;
+    min-width: 380px;
 }
 
 .nav-link {