WordPress.org

Making WordPress.org

Opened 8 months ago

Closed 6 months ago

#4362 closed defect (fixed)

Title bug on /showcase/

Reported by: themeeverest Owned by: ck3lee
Milestone: Priority: low
Component: General Keywords: has-patch
Cc:

Description

When entering wp.org/showcase/ on a mobile device the title gets too large for the header:
https://i.imgur.com/yYtXOMm.png

It looks fine on tablets and other larger devices:
https://i.imgur.com/O8pGnO4.png

A media query reducing the H2 size to 20px on mobile devices would fix it.

I think it's a shame that it's buggy when people enter the "showcase" page, since it's their first impression on the worlds best CMS :-)

Attachments (2)

4362.diff (711 bytes) - added by ck3lee 7 months ago.
WordPress 2019-05-28 15-26-13.png (30.4 KB) - added by ck3lee 7 months ago.

Download all attachments as: .zip

Change History (8)

#1 @Otto42
8 months ago

Yeah, the inspector shows me that it breaks that title at 420px wide.

The rest of the page starts to break down at 310px, in some rather interesting ways.

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


7 months ago

#3 @tellyworth
7 months ago

  • Keywords needs-patch added
  • Owner set to ck3lee
  • Status changed from new to reviewing

@ck3lee
7 months ago

#4 @ck3lee
7 months ago

  • Keywords has-patch added; needs-patch removed

@themeeverest,

attachment:4362.diff fixes the responsive issue by wrapping the title using flex and setting a minimum width to the header.

See screenshot above for the responsive screen @ 300px wide.
I have not reduced the font size in this patch, but I'm happy to do that if you think that is still necessary.

#5 @themeeverest
7 months ago

Looks much better @ck3lee :-)

Awesome!

#6 @coffee2code
6 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 8916:

wp4: Fix display of old-style page titles (as seen in Showcase) at narrow viewports.

Props ck3lee, themeeverest.
Fixes #4362.

Note: See TracTickets for help on using tickets.