The addition of the accessible locale switcher caused a regression on screens exactly 768px wide (typical iPad), due to the way breakpoints are implemented in twentyseventeen. This PR adjusts the overrides and desktop styles around that breakpoint, so that:
The 'WordPress celebrates twenty years' text is visible
The correct padding is applied around the nav bar items
The nav and locale dropdowns look correct when active
I also noticed that we hadn't handled overflow for long locale names in the switcher, so I've also added text-overflow: ellipsis for that.
How to test
Check the layout at a range of screen sizes (desktop, tablet and mobile) for regressions. In particular check screen widths at 767px and 768px (both should use mobile layout), 769px (desktop layout).
Active the nav and locale switcher and check layout
Fixes #101
The addition of the accessible locale switcher caused a regression on screens exactly 768px wide (typical iPad), due to the way breakpoints are implemented in twentyseventeen. This PR adjusts the overrides and desktop styles around that breakpoint, so that:
I also noticed that we hadn't handled overflow for long locale names in the switcher, so I've also added
text-overflow: ellipsisfor that.How to test
Screenshots
See #101 for before