diff --git a/src/wp-admin/contribute.php b/src/wp-admin/contribute.php
index e77628d4e8084..fd800234a2ca0 100644
--- a/src/wp-admin/contribute.php
+++ b/src/wp-admin/contribute.php
@@ -48,10 +48,12 @@
-
-
 ); ?>)
+
+
+
 ); ?>)
+
-
+
-
+
@@ -80,15 +82,19 @@
- Explore ways to reduce the environmental impact of websites.' ); ?>
-
-
 ); ?>)
+
+
+
 ); ?>)
+
-
-
 ); ?>)
+
+
+
 ); ?>)
+
-
+
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 721a98078f0d6..d4c5cad42c72b 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -278,7 +278,7 @@
.about__section.has-2-columns.is-wider-right,
.about__section.has-2-columns.is-wider-left,
.about__section.has-3-columns {
- display: block;
+ display: flex;
margin-bottom: calc(var(--gap) / 2);
}
@@ -329,10 +329,22 @@
@media screen and (max-width: 600px) {
.about__section.has-2-columns {
- display: block;
+ display: flex;
+ flex-direction: column;
margin-bottom: var(--gap);
}
+ /* Make image containers appear first */
+ .about__section.has-2-columns .column:has(.about__image) {
+ order: 2;
+ text-align: center;
+ }
+
+ /* Make text containers appear second */
+ .about__section.has-2-columns .column:not(:has(.about__image)) {
+ order: 1;
+ }
+
.about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) {
padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
@@ -504,7 +516,6 @@
.about__container .about__image img {
max-width: 100%;
- width: 100%;
height: auto;
border-radius: var(--border-radius);
}
@@ -685,7 +696,6 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- padding-top: 0;
margin-bottom: var(--gap);
background: var(--nav-background);
color: var(--nav-color);