Avada Forums Community Forum Strange 1 px whitespace between columns

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • Filmsuchti
    Participant
    Post count: 12

    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?

    Filmsuchti
    Participant
    Post count: 12

    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.

    Filmsuchti
    Participant
    Post count: 12

    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
    Participant
    Post count: 29

    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;
    }
    Filmsuchti
    Participant
    Post count: 12

    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.)

    Filmsuchti
    Participant
    Post count: 12

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.