![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 8 weeks ago
Last modified 39 hours ago
#65346 new defect (bug)
The about page on network has ui issues for mobile device
| Reported by: | umesh.nevase | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.0.3 |
| Component: | Help/About | Version: | 7.0 |
| Severity: | normal | Keywords: | has-patch needs-design-feedback changes-requested |
| Cc: | Focuses: | ui, accessibility |
Description
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. wp-admin/network/about.php
Expected Behavior:
Every section should follow a uniform layout format across all screen sizes: Image first, followed by the section description.
Actual Behavior (Mobile View):
There is not spacing between tabs and WordPress 7.0 heading of the page.
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.
Attachments (4)
Change History (23)
This ticket was mentioned in PR #11974 on WordPress/wordpress-develop by @umesh.nevase.
8 weeks ago
#1
- Keywords has-patch added
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.
@ekamran commented on PR #11974:
8 weeks ago
#2
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:
.aboutsection.has-2-columns .column:has(.about__image) {
order: 2;
}
.aboutsection.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.
@umesh.nevase commented on PR #11974:
8 weeks ago
#3
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:
.aboutsection.has-2-columns .column:has(.about__image) { order: 2; }
.aboutsection.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 commented on PR #11974:
8 weeks ago
#4
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.
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
8 weeks ago
#6
@
8 weeks ago
The sections display the content in the order that the content appears in the code, which to me seems correct and expected. I don't see a strong argument that the mobile view should have a different content order than the desktop layout.
That said, the images are currently interpreted as decorative, so it doesn't really make a difference what order they go in from a reading perspective.
This would have to be reassessed, however, if the images are treated as content in the future.
The spacing issues should probably be resolved, regardless.
#8
@
8 weeks ago
The same image order issue also coming on wp-admin/network/contribute.php.
I understand they are meant to be decorative, but the rendering order on mobile devices currently looks very strange. It defeats the purpose of the decoration and looks like a layout bug. For a better user experience, it is best to stick to a consistent 'description first' order or 'Image first' order for mobile devices.
https://core.trac.wordpress.org/attachment/ticket/65346/contributor.jpg
#9
@
8 weeks ago
- Milestone Awaiting Review → 7.0.1
Moving to 7.0.1 for consideration. Also, cc/ @ryelle who committed the about page and @mukesh27 who did alot of the coding.
#10
@
8 weeks ago
We also need confirmation regarding the layout order for the image and text blocks.
This responsive layout issue occurs on both the About and contribute pages, and we should keep the formatting consistent across both. The current PR only fixes the issue for the about page. To apply the same fix to the contribute page, we will need to make some additional markup changes.
This ticket was mentioned in Slack in #core by masteradhoc. View the logs.
4 weeks ago
@masteradhoc commented on PR #11974:
4 weeks ago
#14
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.
This ticket was mentioned in Slack in #design by masteradhoc. View the logs.
4 weeks ago
@umesh.nevase commented on PR #11974:
4 weeks ago
#16
@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.
Spacing issue between title and tabs of the page