![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#46949 closed defect (bug) (fixed)
Site Health page item and type alignments need improvement for mobile version
| Reported by: | subrataemfluence | Owned by: | afercia |
|---|---|---|---|
| Priority: | normal | Milestone: | 5.2 |
| Component: | Site Health | Version: | 5.2 |
| Severity: | normal | Keywords: | has-patch site-health commit |
| Cc: | Focuses: | ui, administration |
Description
On wp-admin/site-health.php, alignments and spacing of Titles and their Type (e.g. Security, Performance etc.) look ugly. They need to be laid out in a proper manner.
Please see screenshots before and after applying patch.
Uploading patch in a few minutes.
Attachments (13)
Change History (36)
#1
@
7 years ago
- Keywords has-patch added
- Summary Site Health page item and type alignments needs improvement in mobile version → Site Health page item and type alignments need improvement for mobile version
#2
@
7 years ago
- Focuses administration added
- Keywords site-health added
- Milestone Awaiting Review → 5.2
Related: #46939
#3
@
7 years ago
- Keywords needs-refresh added
The patch works fine for 384px to 768px, but what about 360px or 320px sizes?
I think the patch needs refresh.
#8
@
7 years ago
- Keywords needs-refresh added
Thanks @subrataemfluence some minor feedback;
- Drop the
min-widthas it's unnecessary to specifically exclude tiny mobiles. - Combine and move the media queries to the bottom to follow the CS rules for CSS;
“It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet.”
Reference - https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#media-queries
Otherwise this works nicely.
Cheers
#9
@
7 years ago
#46939 has been closed. So I am attaching my patch 46949.3.diff for fix accordion style on this ticket.
#10
@
7 years ago
Thanks @chetan200891
Comparing the two approaches although @chetan200891 solution is simpler code-wise without needing a media query I do prefer the one presented by @subrataemfluence as it's visually cleaner to have the text and badges centered.
#11
@
7 years ago
I guess this needs some design feedback :)
If the centered version is preferable, the approach in 46949-2.diff is a good start (can be done with way less CSS). Otherwise, 46949.3.diff looks good to keep the left alignment.
#12
@
7 years ago
Need to adjust some css for title and arrow icon, In responsive device( 360px width ) it is not display good as per above screenshot.
#13
@
7 years ago
Yep, long titles are a problem. Another approach could be to left-align also the badge and reserve some space on the right to make the text not overlap the chevron icon. (See attached screenshot)
#16
@
7 years ago
Seeing @afercia's screen for left align, I agree left-align does look cleaner than the center align. Cheers
@
7 years ago
Screenshot after applying 46949.4.diff patch. Based on Andrea's suggestion. It looks good.
#17
@
7 years ago
- Keywords needs-design-feedback removed
Left align looks good to me. I am removing the design feedback label, please add that back in if needed.
#18
@
7 years ago
@chetan200891 patch looks fine for me one small issue is there button is overlapping with title.
Current view of the page in mobile device