diff --git a/public/style.css b/public/style.css
index 5b3ecfac..3f9824b6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8551,11 +8551,16 @@ span.icon-rss::before {
   border-radius: 5px;
 }
 .project-card-logo {
-  --image-size: 8rem;
+  --image-size: 5rem;
   width: var(--image-size);
   height: var(--image-size);
   object-fit: cover;
 }
+@media screen and (min-width: 35em) {
+  .project-card-logo {
+    --image-size: 8rem;
+  }
+}
 .project-header-img {
   width: 100%;
   height: var(--height-5);
diff --git a/src/rawdata/scss/projects.css b/src/rawdata/scss/projects.css
index bf0e5e74..660d32b0 100644
--- a/src/rawdata/scss/projects.css
+++ b/src/rawdata/scss/projects.css
@@ -66,11 +66,15 @@
 }
 
 .project-card-logo {
-  --image-size: 8rem;
+  --image-size: 5rem;
 
   width: var(--image-size);
   height: var(--image-size);
   object-fit: cover;
+
+  @media screen and (min-width: 35em) {
+    --image-size: 8rem;
+  }
 }
 
 .project-header-img {
diff --git a/src/templates/src/project_index.html b/src/templates/src/project_index.html
index b12be391..0d95b47f 100644
--- a/src/templates/src/project_index.html
+++ b/src/templates/src/project_index.html
@@ -2,7 +2,7 @@
 
 {{ define "content" }}
 <div class="flex justify-center">
-	<div class="pv3 mw-site flex flex-column g3">
+	<div class="pv3 ph3 ph0-ns mw-site flex flex-column g3">
 		<h2 class="f3">Featured Projects</h2>
 		<div class="post-content">
 			<p>Inspired by Handmade Hero, the Handmade Network community has produced a wide variety of fantastic projects, including apps, debuggers, editors, libraries, and even programming languages.</p>