boards.greenhouse.io - layout is messed up

[lasr21]

URL: https://boards.greenhouse.io/robinhood#.WLkbhoratE5
Browser / Version: Firefox 54.0
Operating System: Mac OS X 10.12
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: https://boards.greenhouse.io/robinhood
2. …

Expected Behavior: test it on chrome 65 http://i.imgur.com/3Ol1Bgs.png

Actual Behavior: layout is funky

From webcompat.com with ❤️

[adamopenweb]

Thanks for the report @lasr21! I can reproduce this in Firefox 54 for OSX.

It seems like this has always been broken in a way, but probably not as noticeable for users.

#main {
    column-count: 2;
    column-fill: auto;
    -moz-column-fill: auto;
    height: 1400px;
}

The main div has column-fill with a moz prefix but not column-count. So in Firefox 51 and earlier, the content would just display as a single column. As of Firefox 52 both properties can be used un-prefixed.

Looks like the reason the content is misaligned is the use of column-span: all. Firefox does not support this property, see https://bugzilla.mozilla.org/show_bug.cgi?id=616436.

#main > div {
    column-span: all;
}

#board_title {
    column-span: all;
    margin-bottom: 40px; 
    max-width: 750px;
}

If we disable column-span in Chrome, the layout looks very similar. We should probably reach out to the site to let them know of the problem. Not sure which way is best to fix this is, setting to needs diagnosis.

[denschub]

Yeah, we don't support column-span yet and sadly, there is no real workaround available. Fortunately, this layout is simple enough to not need a global multi column layout, since the only element divided in two columns is the list of jobs.

My suggestion is to remove all multicol related css from #main. Instead, I'd wrap all section.level-0 into a div and apply column-count: 2; there. As a benefit, they'd no longer need any column-spans at all.

I hope they can fix this. Also, when we're communicating with them, it's probably worth suggesting to upload the header image to greenhouse. Right now, it is served from twitters CDN, which here could get blocked by Tracking Protection!

[karlcow]

is it greenhouse design or robinhood design.

• https://www.greenhouse.io/

• https://robinhood.com/

• https://twitter.com/robinhoodapp

or maybe @robinhood or @jinatonic or @edmondwong could help us find who is in charge of this design.

[jinatonic]

Talked with the recruiting team, this is greenhouse design and not ours.

[karlcow]

Thanks @jinatonic We will try to find a contact at greenhouse.

[jbinney]

Thanks for alerting us to this issue - we removed some CSS overrides from our job board page and reverted to the standard Greenhouse layout. This was a hack to get a 2-column layout on a page where we can't control the HTML, and we just weren't aware that column-span wasn't well supported.

[karlcow]

@jbinney Thanks a lot. With ❤️