WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#26501 closed defect (bug) (fixed)

Twenty Fourteen: Responsive CSS for masthead causes overlap with admin-bar

Reported by: johnjamesjacoby Owned by: lancewillett
Milestone: 3.8 Priority: low
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:

Description

When resizing a browser window between the 781 and 783 pixel range, it's possible to get either the WordPress Admin Bar or the TwentyFourteen Masthead in alternate states of responsiveness, where one bar calculates styles for 782 or less, and the other calculates styles for 782 or greater.

Attaching screenshot, and eventually a patch.

Attachments (2)

Screenshot 2013-12-09 06.48.37.png (28.4 KB) - added by johnjamesjacoby 6 years ago.
Highlighted with inspector to show off the problem
26501.patch (781 bytes) - added by johnjamesjacoby 6 years ago.

Download all attachments as: .zip

Change History (11)

@johnjamesjacoby
6 years ago

Highlighted with inspector to show off the problem

#1 @johnjamesjacoby
6 years ago

  • Keywords has-patch 2nd-opinion added
  • Milestone changed from Awaiting Review to 3.8

#2 @johnjamesjacoby
6 years ago

FYI - Patched from the root of the twentyfourteen theme rather than the WordPress root, as I noticed this on a non-standard installation.

#3 @SergeyBiryukov
6 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Responsive CSS for TwentyFourteen masthead causes overlap with admin-bar to Twenty Fourteen: Responsive CSS for masthead causes overlap with admin-bar

#4 @lancewillett
6 years ago

  • Priority changed from normal to low
  • Version set to trunk

Maybe the WP toolbar should change its behavior, instead. :)

I'd suggest looking at this in Twenty Fourteen for 1.1 (after 3.8 release).

#5 @lancewillett
6 years ago

  • Keywords 2nd-opinion removed

Thanks for the report and patch, JJJ. Since we aren't in freeze yet, we'll do our best to get this fix in.

#6 @lancewillett
6 years ago

  • Keywords commit added

Looked at all the core admin CSS and JS cases of 782 pixels as a breaking point, they are doing it right with 782 as the maximum width value. "This number or lower."

The theme CSS is doing it wrong, the number should be 783 or higher.

#7 @lancewillett
6 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 26831:

Twenty Fourteen: fix breakpoint at 782 pixels wide to exactly match WordPress toolbar breakpoint. Props jjj, fixes #26501.

#8 follow-up: @johnjamesjacoby
6 years ago

Thanks Lance!

#9 in reply to: ↑ 8 @lancewillett
6 years ago

Replying to johnjamesjacoby:

Thanks Lance!

Oh crap, I an incorrect WP.org username for your props. Sorry johnjamesjacoby.

Version 0, edited 6 years ago by lancewillett (next)
Note: See TracTickets for help on using tickets.