Orphaned last column on WP.org homepage when 960px and a little below

[garrett-eclipse]

Hello,

Uploading a screenshot. But wanted to note that the WordPress Users column and the social links column in the footer become orphaned by themselves which feels a little out of place. This starts to happen at 960px wide.

[garrett-eclipse]

Illustrating the orphaned columns.

[dufresnesteven]

I wasn't able to reproduce the issue. Anything i'm missing?

​https://d.pr/v/v4bhJt

[garrett-eclipse]

Replying to dufresnesteven:

I wasn't able to reproduce the issue. Anything i'm missing?

​https://d.pr/v/v4bhJt

Hi @dufresnesteven in your screencast I'm seeing the issue with the WordPress Users column getting orphaned but not the social links. As to the social links being orphaned it appears that only occurs on Chrome/Firefox and not Safari for me so that may be browser specific.

[dufresnesteven]

@garrett-eclipse Although I wasn't able to reproduce, based on the code, the 2% margin on the ul is probably the culprit. I wonder what our official browser version support is. flexbox would be a hero to this problem.

[coffee2code]

In 9577:

wp4.css: Improve responsiveness of homepage's 4-column section just above footer.

• Don't orphan "WordPress Users" column
• Center smaller columns as they flow into new rows, so they aren't left-justified with large right margin
• Fill available space as columns wrap instead of maintaining fixed column widths

Props garrett-eclipse, dufresnesteven, coffee2code.
Fixes #4980.

[coffee2code]

Alternate implementation using flexbox that could have been in lieu of [9577].

[coffee2code]

Re: [9577] -- I had a nicer and more succinct flexbox-based implementation of the above, but went with a non-flexbox approach to be more broadly supportive of browsers, especially since this is the front page. Attached is meta-4980.flexbox.diff​ for future reference.

@garrett-eclipse: The orphaning of the footer social media column wasn't specifically addressed in [9577], but seems to be fixed as a result of it. I was able to reproduced the column getting orphaned, but after the fix above it doesn't appear to happen (on Chrome/FF/Safari). Let me know if you still experience it.

[garrett-eclipse]

Thanks @coffee2code

Testing here I am finding the social media column is still being orphaned but only on Chrome/Firefox between 947(ish)px and 960px.
And oddly enough when in the device preview through the inspector the issue isn't present, it only surfaces when not in inspect and you change your browser width down to that threshold.

[coffee2code]

In 9581:

wp4.css: Prevent orphaning of social media column in footer.

Props garrett-eclipse, coffee2code.
Fixes #4980.

[coffee2code]

In 9582:

wp4.css: Prevent horizontal scrollbar on homepage within a narrow viewport range near largest breakpoint.

See #4980.