We’re hoping that someone might be able to provide a bit of assistance with an issue we’re facing. Currently on one of the sites that we’ve built, su-ku-ya.com, we’re having issue with the flexbox in the ‘Artists’ area on the home page.
In Chrome and Safari, everything displays without any issues (the artists should be listed in two columns), like so:
If we inspect the artist listing div, and change it from 50vw to 49vw in width, this pulls everything back up, but you’ll see there are these extra black margins between all the listings, which seems to be what’s causing the issue:
Firefox is applying the value grid-column-gap: 16px; that Webflow is adding automatically, even though there is no grid defined. I need to read the spec to see if this is an issue with Firefox. Curious why Webflow is adding it. Probably applied as a blanket fix for IE.
Webflow is using autoprefixer which added the grid-colum-gap declaration to your artists class. grid-column-gap is now column-gap in the the working draft which also applies to flex. So Firefox is applying that value. I believe Mozilla is handling this correctly. The others aren’t yet and may never and a Working Draft can also change.
CSS Grid Layout initially defined the grid-column-gap property. This prefixed property is being replaced by column-gap . However, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property as in the second interactive example above. -MDN
Until Webflow lets us define grid-gap and row-gap you will need to add custom css to reset the autoprefixer declarations. The code below will do it.
Hi I just wanted to chime in to confirm this issue is still persisting in Firefox. The website I have created uses flexbox on many pages with different classes. Is their a global attribute equivalent of the custom code solution posted above? So instead of having to fix for each class eg. “.artisit” I could put something in which fixed across all flexbox instances, current and future?
I would like to also know the answer to this. My website is not loading on Firefox, or partially on some Firefox browsers. Certainly there has to be a solution?