Pledge list: Update display on small screens

Fixes #279, fixes #290
WordPress · Sep 9, 2024 · 45875f7 · 45875f7
1 parent 725c04b
commit 45875f7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php b/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php
@@ -50,7 +50,7 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|60"}}} -->
+	<!-- wp:post-template {"style":{"spacing":{"blockGap":"80px"}}} -->
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
 		<div class="wp-block-group">
 			<!-- wp:group {"style":{"border":{"radius":"2px"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->

diff --git a/themes/wporg-5ftf-2024/src/style/style.scss b/themes/wporg-5ftf-2024/src/style/style.scss
@@ -49,17 +49,24 @@ body.is-page-in-menu .wp-block-wporg-local-navigation-bar .wp-block-post-title {
 				max-width: 110px;
 			}
 		}
+	}
+
+	@media (max-width: 600px) {
+		+ * {
+			margin-block-start: 40px;
+		}
 
-		@media (max-width: 600px) {
+		> .wp-block-group {
 			flex-direction: column;
 
 			> .wp-block-group:first-child {
-				max-width: 100%;
+				width: 100%;
 				align-self: center;
 			}
 
 			.wp-block-post-featured-image {
 				max-width: 100%;
+				width: 200px !important;
 			}
 		}
 	}