Fixed projects dash layout and individual project page margins. Apologies if this is sloppy. I am writing this at a Tim Hortons.

2 files changed, 16 insertions, 3 deletions

diff --git a/css/blog-post.css b/css/blog-post.css
index 93b15ec..29e0eb9 100644
--- a/css/blog-post.css
+++ b/css/blog-post.css
@@ -209,6 +209,18 @@ img {
     /* Center the blog post horizontally */
   }
 
+  .project-post {
+    padding-top: 3%;
+    width: 90%;
+    /* Set width to 90% of the screen */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: justify;
+    margin: 0 auto;
+  }
+
   h1 {
     font-size: 1.75rem !important;
     /* Reduce h1 font size on mobile */
diff --git a/css/projects-styles.css b/css/projects-styles.css
index 4761443..5cf1843 100644
--- a/css/projects-styles.css
+++ b/css/projects-styles.css
@@ -4,9 +4,10 @@
 
 body {
   min-height: 100vh;
+  width: 100vw;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow-x: hidden;
   position: relative;
   background-color: #f9f9f9;
   margin: 0 !important;
@@ -59,7 +60,7 @@ h4 {
 p {
   font-size: 1rem !important;
   font-weight: 400;
-  width: 300px;
+  width: minmax(250px, 1fr);
   text-wrap: wrap;
 }
 
@@ -135,7 +136,7 @@ a {
 .projects-grid {
   display: grid;
   gap: 1em;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-auto-flow: row;
 }