NO BUG: 3 columns post query shows up as 2 columns in Firefox

Bugs
21

Tried ‘root’, tried giving it a custom class, tried the layout wrapper class, the inner layout class

22

I am out of ideas… sorry…

1 Like
23

Hi,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.

Best regards,
timmse

25

Me neither… No worries, thanks for helping!

26

Thanks! hopefully you will be able to figure it out :slight_smile:

27

Maybe I already got something: change the gap to 74px or 76px (a round number) and see if it helps. At first glance, it works in my tests :thinking:

1 Like
28

huh, that’s crazy! Works indeed.
Per Patric’s question I tried tweaking with that number but when I tried it before it seemed that 10px was the only amount that fixed it, which obviously was way too far away from 75px.
Just tried 74px and 76px and both seem to work.
Thanks!

1 Like
29

I guess it’s somehow related to pixel rounding or something. Some values work, others don’t. Let’s see if the devs have any idea :bulb:

2 Likes
30

Hi guys,
As already guessed, it is related to pixel rounding and there is nothing concrete we can do about it, as it heavily depends on the settings (columns, gaps).

There is a workaround by reducing the column width by one pixel, which might fit in one or the other solution.

.bricks-layout-wrapper[data-layout="grid"].isotope > li:not(.bricks-gutter-sizer) {
  width: calc(100% / var(--columns) - var(--gutter) * (var(--columns) - 1) / var(--columns) - 1px);

Alternatively, you can always test one pixel more or less for the gap - I don’t think anyone will be able to tell the difference.

Best regards,
timmse

2 Likes