Making WordPress.org

Opened 23 months ago

Closed 21 months ago

Last modified 21 months ago

#4980 closed defect (fixed)

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

Reported by: garrett-eclipse Owned by: coffee2code
Milestone: Priority: normal
Component: WordPress.org Site Keywords:



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.

Attachments (2)

Screen Shot 2020-01-22 at 2.55.50 PM.png (286.8 KB) - added by garrett-eclipse 23 months ago.
Illustrating the orphaned columns.
meta-4980.flexbox.diff (1000 bytes) - added by coffee2code 21 months ago.
Alternate implementation using flexbox that could have been in lieu of [9577].

Download all attachments as: .zip

Change History (10)

23 months ago

Illustrating the orphaned columns.

#1 follow-up: @dufresnesteven
23 months ago

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


#2 in reply to: ↑ 1 @garrett-eclipse
23 months ago

Replying to dufresnesteven:

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


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.

#3 @dufresnesteven
23 months ago

@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.

#4 @coffee2code
21 months ago

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

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.

21 months ago

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

#5 @coffee2code
21 months ago

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.

#6 @garrett-eclipse
21 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#7 @coffee2code
21 months ago

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

In 9581:

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

Props garrett-eclipse, coffee2code.
Fixes #4980.

#8 @coffee2code
21 months ago

In 9582:

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

See #4980.

Note: See TracTickets for help on using tickets.