The 'Get WordPress' button is lost between 950px & 1015px wide

[garrett-eclipse]

Hello,

If your screen is between 950px and 1015px the 'Get WordPress' button is lost. Screens attached. This is because it's falling below but overflow is hidden.

Cheers

[garrett-eclipse]

Lost the 'Get WordPress' button

[JarretC]

Looks like there is actually 2 display:none being set in 2 different stylesheets causing it to not show

​https://s.w.org/style/wp4.css

@media screen and (max-width:820px) {
	#wporg-header ul li#download {
		display: none;
	}
}

​https://wordpress.org/support/wp-content/themes/pub/wporg-support/sass/modules/_wporg-header.scss

&#download,
		&.download {
			float: right;
			height: 34px;
			margin-right: 14px;
			overflow: hidden;
			padding: 0 0 34px;

			@include breakpoint( 0, 820px ) {
				display: none;
			}

			@include breakpoint( 0, $sm ) {
				display: block;
				float: none;
				margin: 10px 20px 20px;
				padding-bottom: 0;
				height: auto;

				a {
					padding: 4px 10px;
				}
			}

			a {
				margin: 0;
				padding: 0 16px;

				&:hover {
					color: #eee;
				}
			}

			&.current,
			&.current-menu-item,
			.uparrow {
				display: none;
			}
		}

If both are those are disabled in the Inspector the download button remains visible until it switches over into the mobile menu

[Otto42]

The button stays visible for me all the way down to 820px wide, which is where the breakpoint is set for the mobile banner button.

What browser are you using?

[garrett-eclipse]

Hi @Otto42 checking again it works as expected on the homepage. It's when you're on a subpage like a plugin;
​https://wordpress.org/plugins/pluginception/

On the homepage when the button vanishes out of the header it then get it's own CTA section. This isn't present on subpages like plugin pages so there's a gap where it's not available and then becomes available again when the mobile menu is re-introduced.

Hope that helps identify it there.

[Otto42]

On plugin pages, it vanishes at 820px, as expected, but the mobile header doesn't come into effect until 767px. Also, for some reason, the button comes back at exactly 768px before disappearing again a pixel later.

I expect this is down to rules in each sites individual theme.

[tellyworth]

In 9306:

wp.org main theme: eliminate breakpoint gap hiding Get WordPress button.

This fixes an issue in the main theme stylesheet that results in the Get WordPress button being lost at specific display widths.

This commit won't fix the problem - child themes that inherit from this main theme will need to be rebuilt to import the new CSS.

Props dufresnesteven.
See #4732.

[tellyworth]

In 9307:

Plugin theme: update css to fix Get WordPress button breakpoint.

See #4732

[tellyworth]

In 9308:

Plugin directory: bust cache for r9307

See #4732

[dufresnesteven]

Following up Alex's work...

This ticket ends up being a deployment task more so than a coding change. I don't have access to run the deployment. Providing the fix is working properly, the following needs to happen:

Done
Built css and deploy to wporg-plugins (/plugins) as quiet test

To Do
Build Theme CSS and deploy

• wporg-main
• wporg-support
• wporg-themes
• wporg-breathe
• wporg-learn

Update min-width:821px to min-width:769px in wp4.css (Line: 642)

@media screen and (min-width:821px) {
	#download-mobile {
		display: none;
	}
}

This controls the display of the the "Get WordPress" banner on the homepage. It should turn off when we hit desktop.

Known Issues
There is a moment at 768px where the "Get Wordpress" button grows in height and pushes down the content for an awkward layout.

See #4848

[coffee2code]

Replying to dufresnesteven:

To Do
Build Theme CSS and deploy

All listed themes have since been rebuilt, most recently [9760] which updated them all.

Update min-width:821px to min-width:769px in wp4.css (Line: 642)

@media screen and (min-width:821px) {
	#download-mobile {
		display: none;
	}
}

This controls the display of the the "Get WordPress" banner on the homepage. It should turn off when we hit desktop.

This shouldn't be necessary. At the existing breakpoint, the download button disappears just as the main content shows an initial block "Ready to get started?" with its own "Get WordPress" button. So on the front page we do want the nav menu version of the button to disappear earlier than the mobile menu becomes available.