Streaming live at 10am (PST)

Issues with Flexbox creating extra margins, only in Firefox

Hey everyone,

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:

…but for some reason in Firefox, it appears as though an extra margin is being added, which pushes every second artist image onto a separate line:

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:

If anyone has any ideas as to why this could be happening that that would be greatly appreciated!

Thank you! :slight_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/sukuya?utm_medium=preview_link&utm_source=dashboard&utm_content=sukuya&preview=c863b60a95a83705371207048ef02d69&mode=preview

It’s an issue with Webflow’s generated CSS and Firefox.

Add this custom code (CSS) to your before body open custom code area. That should fix your Firefox layout issue and not interfere with other browsers.

<style>
.artist {
    grid-column-gap: 0px;
}
</style>

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.

I did some research and see that there has been a change defined in the CSS Box Alignment Module Level 3 working draft;

https://drafts.csswg.org/css-align-3/#propdef-column-gap

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.

See https://developer.mozilla.org/en-US/docs/Web/CSS/gap

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.

<style>
.artist {
    grid-gap: normal;
    row-gap: normal;
}
</style>

Thank you @webdev — very much appreciated! Adding in the below code resolved the issue. Thanks again for looking into it :slight_smile:

<style>
.artists {
    grid-gap: normal;
    row-gap: normal;
}
</style>