Making WordPress.org

Opened 3 years ago

Last modified 5 days ago

#2822 new enhancement

Support forum should have better styling on mobile (6.44′ screen)

Reported by: alkesh7 Owned by:
Milestone: Priority: low
Component: Support Forums Keywords: needs-patch needs-ui


Hi guys,

I noticed some issues with wordpress.org support forum with my Mi Max smartphone (screens size - 6.444').

Gravatar image showing outside the content, http://prnt.sc/eu2eey

There are lots of issues, not only single one that I have listed above. Someone need to play with the same smartphone and access whole wordpress.org site


Attachments (3)

2822.diff (1.7 KB) - added by dufresnesteven 5 days ago.
Improve: Pagination control on smaller viewports.
current.png (147.3 KB) - added by dufresnesteven 5 days ago.
Current layout of the pagination component.
Updated-layout.png (126.3 KB) - added by dufresnesteven 5 days ago.
Updated Layout

Download all attachments as: .zip

Change History (10)

#1 @ocean90
3 years ago

  • Component changed from Browse Happy to Support Forums
  • Priority changed from normal to low

#2 @melchoyce
3 years ago

  • Keywords needs-ui added

#3 @kjellr
10 months ago

👋 I spent a little time thinking about some light adjustments to help the forums behave better on mobile. Here are some comps along with some specific notes:

Landing Page:

  • The Create Issue / Pagination should be stacked.
  • Pagination should be wider and (at least a little) taller to be more amenable to touch interfaces.
  • The entire content width could be widened a bit to take advantage of the smaller available space.
  • The "Pinned" and "Resolved" icons should hang off to the left of the text, rather than simply being inline.
  • On the smallest screens (320ish), the table headings do not line up with the content. We should rework to include those inline instead.


Individual Topic

  • In general, tighten up margins to make better use of space.
  • Like the landing page, we should widen the content area a little bit.
  • Reduce the font size of the title, for better line lengths.
  • We should tighten the extra-tall line height for the breadcrumb.
  • Make the avatars smaller and stack the "Resolved" tag.
  • Add larger body font sizes for improved readability.


#4 @melchoyce
10 months ago

These look great, @kjellr 👍

This ticket was mentioned in Slack in #forums by clorith. View the logs.

8 weeks ago

5 days ago

Improve: Pagination control on smaller viewports.

5 days ago

Current layout of the pagination component.

5 days ago

Updated Layout

#6 @dufresnesteven
5 days ago

I updated the pagination control to be more mobile friendly in: 2822.diff

Images above.

Regression Testing Matrix

OS Browser Support
WIndows 7 IE 9
Window 8 IE 10
Window 8 IE 11
Window 8.1 IE 11
Window 10 IE 11
Window 10 Edge
Android Galaxy 9 Firefox
MacOS Mojave Safari 12.1

#7 @dd32
5 days ago

In 9620:

Support: Better styling for pagination on smaller screen widths.

Props dufresnesteven, kjellr.
See #2822.

Note: See TracTickets for help on using tickets.