Fixed the readability issue on mobile devices for image and text sequence.

[umeshnevase]

Fixed spacing between page heading and tabs for both desktop and mobile device.
Fixed the readability issue on mobile devices for image and text sequence for mobile devices.

The responsive layout on the Network About page causes readability and spacing issues on mobile devices. The current section ordering is inconsistent and confusing for the user.

Expected Behavior:
Every section should follow a uniform layout format across all screen sizes: Image first, followed by the section description.
There should be space between heading and tabs.
Please check screenshot for issue.

Actual Behavior (Mobile View):
Due to the responsive grid layout, the section order alternates incorrectly on mobile screens:

• Some sections display the image first.
• Other sections display the description first.

Trac ticket: https://core.trac.wordpress.org/ticket/65346

[ekamran]

I tested this locally on the latest PR branch.

The issue is reproducible on clean trunk in mobile view. At a narrow viewport, the feature sections on wp-admin/about.php alternate between:

• text first, image second
• image first, text second

So the reported inconsistency is valid.

However, I don’t think the current patch fully fixes it yet.

The new CSS order values look reversed compared with the comments and expected behavior.

Current patch has:

.about__section.has-2-columns .column:has(.about__image) {
order: 2;
}

.about__section.has-2-columns .column:not(:has(.about__image)) {
order: 1;
}

If the expected mobile order is image first and description second, then the image column should be order: 1 and the text column should be order: 2.

I tested that small change locally, and it makes the main feature sections display consistently as image first, then text, on mobile.

I also ran:

npm run grunt -- build:css

That completed successfully.

Happy to share the small patch if helpful.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props umeshnevase, ekamran.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[umeshnevase]

I tested this locally on the latest PR branch.

The issue is reproducible on clean trunk in mobile view. At a narrow viewport, the feature sections on wp-admin/about.php alternate between:

• text first, image second
• image first, text second

So the reported inconsistency is valid.

However, I don’t think the current patch fully fixes it yet.

The new CSS order values look reversed compared with the comments and expected behavior.

Current patch has:

.about__section.has-2-columns .column:has(.about__image) { order: 2; }

.about__section.has-2-columns .column:not(:has(.about__image)) { order: 1; }

If the expected mobile order is image first and description second, then the image column should be order: 1 and the text column should be order: 2.

I tested that small change locally, and it makes the main feature sections display consistently as image first, then text, on mobile.

I also ran:

npm run grunt -- build:css

That completed successfully.

Happy to share the small patch if helpful.

Thanks for reviewing and bringing this up! We should actually place the section description first, followed by the image. Keeping the description on top provides the necessary context so the reader immediately understands what the image represents.

[ekamran]

Thanks for clarifying. That makes sense.

I was assuming the expected mobile order should be image first, then description. If the intended order is description first, then image, the current order values are correct.

No patch needed from my side for that part.