WordPress.org

Making WordPress.org

Opened 4 weeks ago

Last modified 4 weeks ago

#4732 new defect

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 4 weeks ago.
Lost the 'Get WordPress' button

Download all attachments as: .zip

Change History (5)

@garrett-eclipse
4 weeks ago

Lost the 'Get WordPress' button

#1 @JarretC
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks 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.

Note: See TracTickets for help on using tickets.