WordPress.org

Making WordPress.org

Opened 6 months ago

Closed 4 months ago

Last modified 4 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:
Cc:

Description

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.

Attachments (2)

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

Download all attachments as: .zip

Change History (10)

@garrett-eclipse
6 months ago

Illustrating the orphaned columns.

#1 follow-up: @dufresnesteven
6 months ago

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

https://d.pr/v/v4bhJt

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

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.

#3 @dufresnesteven
6 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
4 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.

@coffee2code
4 months ago

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

#5 @coffee2code
4 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
4 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
4 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
4 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.