From 152beaffa88e3d91823f326ce617b27a74f888e9 Mon Sep 17 00:00:00 2001
From: umesh <umesh.nevase@rtcamp.com>
Date: Tue, 26 May 2026 17:51:09 +0530
Subject: [PATCH 1/2] Fixed the spacing between page heading and tabs. Fixed
 the readability issue on mobile devices for image and text sequence.

---
 src/wp-admin/css/about.css | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 721a98078f0d6..262809a204526 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -329,10 +329,21 @@
 
 @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;
+	}
+
+	/* 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);
@@ -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);

From 44bb39fce73e55d58b9783987caa2cba4611a12d Mon Sep 17 00:00:00 2001
From: umesh <umesh.nevase@rtcamp.com>
Date: Wed, 24 Jun 2026 10:52:05 +0530
Subject: [PATCH 2/2] Fixed mobile styling for the Contribute page to display
 sections with text followed by the corresponding image. Removed the width:
 100% restriction from the 'About Us' images to keep their original width
 across both the About and Contribute pages.

---
 src/wp-admin/contribute.php | 24 +++++++++++++++---------
 src/wp-admin/css/about.css  |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

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 @@
 	</nav>
 
 	<div class="about__section has-2-columns is-wider-right">
-		<div class="column">
-			<img src="<?php echo esc_url( admin_url( 'images/contribute-main.svg?ver=6.5' ) ); ?>" alt="" width="290" height="290" />
+		<div class="column is-left-padding-zero">
+			<div class="about__image">
+				<img src="<?php echo esc_url( admin_url( 'images/contribute-main.svg?ver=6.5' ) ); ?>" alt="" width="290" height="290" />
+			</div>
 		</div>
-		<div class="column is-vertically-aligned-center">
+		<div class="column is-vertically-aligned-center is-right-padding-zero">
 			<p><?php _e( 'Do you use WordPress for work, for personal projects, or even just for fun? You can help shape the long-term success of the open source project that powers millions of websites around the world.' ); ?></p>
 			<p><?php _e( 'Join the diverse WordPress contributor community and connect with other people who are passionate about maintaining a free and open web.' ); ?></p>
 
@@ -64,7 +66,7 @@
 	</div>
 
 	<div class="about__section has-2-columns is-wider-left">
-		<div class="column is-vertically-aligned-center">
+		<div class="column is-vertically-aligned-center is-left-padding-zero">
 			<h2 class="is-smaller-heading"><?php _e( 'No-code contribution' ); ?></h2>
 			<p><?php _e( 'WordPress may thrive on technical contributions, but you don&#8217;t have to code to contribute. Here are some of the ways you can make an impact without writing a single line of code:' ); ?></p>
 			<ul>
@@ -80,15 +82,19 @@
 				<li><?php _e( '<strong>Explore</strong> ways to reduce the environmental impact of websites.' ); ?></li>
 			</ul>
 		</div>
-		<div class="column">
-			<img src="<?php echo esc_url( admin_url( 'images/contribute-no-code.svg?ver=6.5' ) ); ?>" alt="" width="290" height="290" />
+		<div class="column is-right-padding-zero">
+			<div class="about__image">
+				<img src="<?php echo esc_url( admin_url( 'images/contribute-no-code.svg?ver=6.5' ) ); ?>" alt="" width="290" height="290" />
+			</div>
 		</div>
 	</div>
 	<div class="about__section has-2-columns is-wider-right">
-		<div class="column">
-			<img src="<?php echo esc_url( admin_url( 'images/contribute-code.svg?ver=6.5' ) ); ?>" alt="" width="290" height="290" />
+		<div class="column is-left-padding-zero">
+			<div class="about__image">
+				<img src="<?php echo esc_url( admin_url( 'images/contribute-code.svg?ver=6.5' ) ); ?>" alt="" width="290" height="290" />
+			</div>
 		</div>
-		<div class="column is-vertically-aligned-center">
+		<div class="column is-vertically-aligned-center is-right-padding-zero">
 			<h2 class="is-smaller-heading"><?php _e( 'Code-based contribution' ); ?></h2>
 			<p><?php _e( 'If you do code, or want to learn how, you can contribute technically in numerous ways:' ); ?></p>
 			<ul>
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 262809a204526..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);
 	}
 
@@ -337,6 +337,7 @@
 	/* Make image containers appear first */
 	.about__section.has-2-columns .column:has(.about__image) {
 		order: 2;
+		text-align: center;
 	}
 
 	/* Make text containers appear second */
@@ -515,7 +516,6 @@
 
 .about__container .about__image img {
 	max-width: 100%;
-	width: 100%;
 	height: auto;
 	border-radius: var(--border-radius);
 }