WordPress.org

Making WordPress.org

Opened 3 years ago

Last modified 6 months 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
Cc:

Description

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

Regards,
Alkesh

Change History (4)

#1 @ocean90
3 years ago

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

#2 @melchoyce
2 years ago

  • Keywords needs-ui added

#3 @kjellr
6 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.

https://cldup.com/ZSDkoJrZK8-3000x3000.png


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.

https://cldup.com/HmlViDClRm-2000x2000.png

#4 @melchoyce
6 months ago

These look great, @kjellr 👍

Note: See TracTickets for help on using tickets.