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, masteradhoc.

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.

[masteradhoc]

Thanks for the PR @umeshnevase. Would it be possible to extend the changes as well to wp-admin/network/contribute.php like you suggested? After the commit check please if the UnitTests run successfully and we'll make sure to get the PR reviewed to check if we can get it into WP 7.0.1.

Additionally we've asked #design for feedback.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[umeshnevase]

@masteradhoc
Fixed the responsive layout for the Contribute page. Note that because both the About and Contribute pages share the same classes, removing width: 100% from the images means the About page images are now narrower than they were previously. Let me know if we need to write specific overrides for that page.