Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#4980 closed defect (bug) (fixed)

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

Reported by: garrett-eclipse's profile garrett-eclipse Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: 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 4 years ago.
Illustrating the orphaned columns.
meta-4980.flexbox.diff (1000 bytes) - added by coffee2code 4 years ago.
Alternate implementation using flexbox that could have been in lieu of [9577].

Download all attachments as: .zip

Change History (10)

4 years ago

Illustrating the orphaned columns.

#1 follow-up: @dufresnesteven
4 years ago

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

#2 in reply to: ↑ 1 @garrett-eclipse
4 years 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
4 years 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 years 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.

4 years ago

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

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