Flexbox Weirdness in Firefox

Hi everyone,

I am using the new flexbox settings to vertically center a row of columns between the top of my page and the start of main content (little gray crosshairs in the screenshot). It works well in Safari, Chrome, even IE. In FF however, the row of columns remains vertically centered, but the columns all condense horizontally so that the little crosshair graphics are pushed closer together (see screenshots).

I’ve noticed that if I change the header div to be a block instead of flex, the columns are spaced out horizontally in FF (correct), but of course I can no longer vertically center the row of columns in a responsive way. (I could just add padding/margin to push them down, but I want that space the top to be dynamic, based on a user’s browser window size.

Any ideas?



Here is my public share link: Webflow - ShapiroWalker Coming Soon
(how to access public share link)

@fmcausby - Hey Forrest, did you get this sorted out? I tested in FF mac 45.0.2 on your published domain (http://shapirowalker.com/) and they appear correctly. If you are still having issues let me know what version of FF you are using.

  • Robert

EDIT: I see from the inspector on a closer look that you are still using display: block on the published site.

Hi Robert, thanks for the reply! I dropped back / punted and just made those little dingbats anchor to the top of the page. It works well, although it’s not what I envisioned. If you have a solution to float those little guys in between the top of the page and the content I’d love to hear it. It works in all the other browsers which is what was throwing me. FF for some reason renders them jammed together as long as I’m using flex for that header div. Thanks!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.