WordPress.org

Making WordPress.org

Opened 13 months ago

Closed 5 months ago

#4732 closed defect (fixed)

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

Reported by: garrett-eclipse Owned by:
Milestone: Priority: normal
Component: General Keywords: has-screenshots
Cc:

Description

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

Attachments (1)

Screen Shot 2019-09-17 at 11.44.41 PM.png (129.1 KB) - added by garrett-eclipse 13 months ago.
Lost the 'Get WordPress' button

Download all attachments as: .zip

Change History (11)

@garrett-eclipse
13 months ago

Lost the 'Get WordPress' button

#1 @JarretC
13 months ago

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

#2 @Otto42
12 months ago

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?

#3 @garrett-eclipse
12 months ago

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.

#4 @Otto42
12 months ago

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.

#5 @tellyworth
10 months ago

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.

#6 @tellyworth
10 months ago

In 9307:

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

See #4732

#7 @tellyworth
10 months ago

In 9308:

Plugin directory: bust cache for r9307

See #4732

#8 follow-up: @dufresnesteven
10 months ago

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

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


10 months ago

#10 in reply to: ↑ 8 @coffee2code
5 months ago

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

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.

Note: See TracTickets for help on using tickets.