Issues with Flexbox creating extra margins, only in Firefox

Design help General
1

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:

Chrome
Chrome1200×903 161 KB

…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:

Firefox-1
Firefox-11200×903 101 KB

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-2
Firefox-21200×903 159 KB

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

2

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.

3

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 gap - CSS: Cascading Style Sheets | MDN

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>
4

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>
5

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?

6

This issue is now persisting in all Chromium-based browsers (Brave, Chrome, Vivaldi, etc)!

7

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?