Hello,

I've just finished my website but I discovered the following problem when I removed the Maintenance mode :

There are little margins between each portfolio item and I don't know how to make them disappear completely.

What's even weirder is that each time I resize my browser, the margins disappear, as well as the horizontal scrollbar.

I tried every option in the back office that might have helped, but none did. The problem also occurs when I change the number of items per row. If this can help, every thumbnail has a 1:1 ratio (1000x1000px).

I'd appreciate any help you can provide regarding this issue.

Thanks in advance, have a great day!

Hi Ylli, thank you for answering.
I haven't done anything to fix it, the problem still occurs on my side both in Google Chrome and Microsoft Edge, I haven't tested on Firefox and Safari though.

Have you tried with the browser in full screen? Here are videos on both browsers so that you can see.
When I resize the browser or do a Ctrl-/Ctrl+, the margins disappear but they come back each time I refresh...

Hi Ylli,

I don't have other screens but I asked some friends to try on their desktops.

One has the bug on all browsers (27-inch) except on Edge (pics 1 and 2), another one doesn't have the bug, she has a smaller screen

I have no idea on why it does so only for certain screens, but maybe it has to do with the way the portfolio columns are define, if it's with percentages maybe ?

Not sure if you will be able to experience the bug on tour side, but I hope you can help me with it. Thanks in advance 🙏🏼

I tested also with Chrome on Windows and the problem is still there - If i go to developer mode in chrome the problem is not there because the browser resizes. On reload it's still there - i think it's a resizing problem on first load and reload if not resized.

Thank you for testing on your side André!

Thank you Ylli, I look forward to your answer.

Have a nice day !

Hello!

I tried something with ChatGPT, which suggested some JS to simulate a resize after the page loads, and it works perfectly! Here it is, if it can help someone else:

function custom_js() {
    echo '<script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                window.dispatchEvent(new Event("resize"));
            }, 100);
        });
    </script>';
}

Thank you for your time, have a nice day.