WordPress.org

Making WordPress.org

Opened 3 months ago

Last modified 6 days 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 3 months ago.
Lost the 'Get WordPress' button

Download all attachments as: .zip

Change History (10)

@garrett-eclipse
3 months ago

Lost the 'Get WordPress' button

#1 @JarretC
3 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
3 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
3 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
3 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
7 days 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
7 days ago

In 9307:

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

See #4732

#7 @tellyworth
7 days ago

In 9308:

Plugin directory: bust cache for r9307

See #4732

#8 @dufresnesteven
7 days 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.


6 days ago

Note: See TracTickets for help on using tickets.