Strange 1 px whitespace between columns

[Tom]

#488573

Hello everybody,

did anyone else experienced strange 1 px lines between theoretically perfect connected columns without borders (Column Spacing: 0px)?

Here is a screenshot: https://imgur.com/a/dZJvuqf

This white lines dont appear every time, but most of the times. And it only appears between 1/3-columns with the “lift up” hover affect enabled.

It really annoyes me, can anyone solve this issue?

[Tom]

#493685

Im still struggeling with this – can anyone provide some help or ideas?

This whitespace is only visible when the parent container is 100% width; margin and padding are 0px on every column, column spacing is set to “no” and center content ist turned on to “yes”. The columns are set to equal height and on mouseover, the hover effect is turned “on”.

Fun Fact: The white line disappears when the user is zooming in or out in his browser and reappears when going back to the standard 100% view.

I spent hour to create a perfect page and this issue is driving me mad now.

[Tom]

#493686

After some testing, I found out, that the bug is caused by the hover effect. But i want to keep it.

Anyone with CSS-knowledge can take a look on the code? Here is a live example with and without the hover. I colored the background yellow for better visibility of the bug.

https://filmsucht.org/test-whitespace-bug/

[pigsandbees]

#493746

Inspecting the element of your test page, changing the min-height of the div class .fusion-column-content-centered from 88.3667px to 89px removes the yellow line.

Screenshot here.

Try adding the following custom CSS to Avada > Theme Options > Custom CSS and click Save Changes:

.fusion-column-content-centered {
min-height: 89px !important;
}

[Tom]

#493804

Thank you very much for your help, I really appreciate it!

Sadly, your snippet doesnt work for me. Even with 100px (and after disabling cache etc), the yellow line is still there.

Even more funnier – on my end, there never was a horizontal yellow line, but a vertical one.
(Screenshot: https://imgur.com/a/njQANBK)

It seems to me, that the bug must depend on some percentage-based values and is messing things up on an individual basis, depending to screen size, zoom factor etc. Based on that theory, maybe a non-pixel-measured solution is needed.

I tested this issue now with one-fourth-columns instead of the one-thirds and voilá – no bug anymore on my end. So maybe its the 33,333% that causes this. Unfortunatly, one-fourth-columns are too small, I really want the one-third-columns.

(Unfortunately, my support has run out and I dont want to spend $40 for solving this single bug.)

[Tom]

#493808

Just to clarify – after inserting the snippet, I had a horizontal yellow line. But not before. And of course I didnt expected the snippet to kill the vertical line.

[Author]

Posts