Events: Align footer organize section on mobile

WordPress · Nov 27, 2023 · 4fd3ef0 · 4fd3ef0
1 parent ac3fa93
commit 4fd3ef0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/public_html/wp-content/themes/wporg-events-2023/parts/footer.html b/public_html/wp-content/themes/wporg-events-2023/parts/footer.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"className":"wporg-events__footer-organize","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group wporg-events__footer-organize"
 	style="padding-top:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
 	<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fixed","flexSize":"70%"}},"fontSize":"heading-4"} -->
 	<p class="has-heading-4-font-size">If you can't find a WordPress event around your area, you can become an organizer

diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/footer.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/footer.pcss
@@ -0,0 +1,11 @@
+.wporg-events__footer-organize {
+	@media (--small-only) {
+		&.is-layout-flex {
+			display: block;
+		}
+
+		& .wp-block-buttons.is-layout-flex {
+			display: block;
+		}
+	}
+}
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss
@@ -9,6 +9,7 @@
 /* Base */
 @import "base/breakpoints.pcss";
 @import "base/layout.pcss";
+@import "base/footer.pcss";
 
 /* Pages */
 @import "page/front-page/cover.pcss";