diff --git a/public/style.css b/public/style.css
index 3f9824b6..27116a87 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8563,10 +8563,14 @@ span.icon-rss::before {
 }
 .project-header-img {
   width: 100%;
-  height: var(--height-5);
   background-color: rgba(255, 255, 255, 0.5);
   background-size: cover;
 }
+@media screen and (min-width: 35em) {
+  .project-header-img {
+    height: var(--height-5);
+  }
+}
 .project-links {
   background-color: var(--c-transparent-background);
   display: flex;
@@ -8578,6 +8582,15 @@ span.icon-rss::before {
   content: "\200b";
   padding: var(--spacing-2) 0;
 }
+.project-links-spacer {
+  height: var(--height-4);
+}
+@media screen and (min-width: 35em) {
+  .project-links-spacer {
+    height: auto;
+    flex-grow: 1;
+  }
+}
 .project-homepage-card {
   width: 100%;
   max-width: var(--site-width-narrow);
@@ -8587,7 +8600,11 @@ span.icon-rss::before {
   display: flex;
   gap: var(--spacing-3);
   overflow: hidden;
-  margin-top: -4rem;
+}
+@media screen and (min-width: 35em) {
+  .project-homepage-card {
+    margin-top: -4rem;
+  }
 }
 
 /* src/rawdata/scss/showcase.css */
diff --git a/src/rawdata/scss/projects.css b/src/rawdata/scss/projects.css
index 660d32b0..1b86da4d 100644
--- a/src/rawdata/scss/projects.css
+++ b/src/rawdata/scss/projects.css
@@ -80,10 +80,13 @@
 .project-header-img {
   /* w-100 h5 bg-white-50 bg-center cover */
   width: 100%;
-  height: var(--height-5);
   /* TODO(redesign): Better placeholder */
   background-color: rgba(255, 255, 255, 0.5);
   background-size: cover;
+
+  @media screen and (min-width: 35em) {
+    height: var(--height-5);
+  }
 }
 
 .project-links {
@@ -100,6 +103,15 @@
   }
 }
 
+.project-links-spacer {
+  height: var(--height-4);
+
+  @media screen and (min-width: 35em) {
+    height: auto;
+    flex-grow: 1;
+  }
+}
+
 .project-homepage-card {
   width: 100%;
   max-width: var(--site-width-narrow);
@@ -110,5 +122,7 @@
   gap: var(--spacing-3);
   overflow: hidden;
 
-  margin-top: -4rem;
+  @media screen and (min-width: 35em) {
+    margin-top: -4rem;
+  }
 }
\ No newline at end of file
diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html
index ba873a03..02ee255a 100644
--- a/src/templates/src/project_homepage.html
+++ b/src/templates/src/project_homepage.html
@@ -9,9 +9,9 @@
 
 {{ define "content" }}
 <div class="flex justify-center">
-	<div class="flex-grow-1 flex flex-column items-center mw-site pt4">
+	<div class="flex-grow-1 flex flex-column items-center mw-site pt4-ns">
 		<div class="project-header-img" style="background-image: url('{{ .Project.HeaderImage }}')">
-			<div class="flex justify-between pa3">
+			<div class="flex flex-column flex-row-ns pa2 pa3-ns">
 				<div class="flex g3">
 					{{ if .CanEdit }}
 						<div class="project-links">
@@ -19,7 +19,8 @@
 						</div>
 					{{ end }}
 				</div>
-				<div class="flex g3">
+				<div class="project-links-spacer"></div>
+				<div class="flex flex-column flex-row-ns items-end g2 g3-ns">
 					{{ with .PrimaryLinks }}
 						<div class="project-links">
 							{{ range . }}
@@ -105,7 +106,7 @@
 			</div>
 		</div>
 		{{ if .Project.ParsedDescription }}
-			<div id="longdesc" class="description w-100 mw-site-narrow pt4">
+			<div id="longdesc" class="description w-100 ph3 ph0-ns mw-site-narrow pt4">
 				<h3 class="f4">About {{ .Project.Name }}</h3>
 				<hr class="mv3">
 				<div class="longdesc-content post-content maxh-5 overflow-hidden">
@@ -121,8 +122,8 @@
 </div>
 {{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
 <div class="bg1 mt4 bt bb pv4">
-	<div class="m-center mw-site flex g3">
-		<div class="flex flex-column g3">
+	<div class="m-center mw-site flex g3 ph3 ph0-ns">
+		<div class="dn flex-ns flex-column g3">
 			<div class="bg3 pa3 w5 flex flex-column g2">
 				Filters
 				<div class="timeline-filters flex flex-column g1">