[Escalated to 2nd Tier] Post listings are overlapping

[Author]

Posts

[Zeb H.]

I am trying to:
Separate all the listings without any overlap. I know it fixes when I resize the window or refresh the page. But that is not a good solution... it should load properly the first time.

This is an issue I have asked for help with before and it wasn't resolved. Now I'm hoping we can fix this; some kind of RESET that can be added at the end of the template or something.

Link to a page where the issue can be seen:
hidden link

Please help!!

[Luo Yang]

Hello,

I have tried the URL you mentioned above with my Chrome browser, it works fine, I don't see the issue you mentioned above:
Post listings are overlapping
See my screenshot

Is this issue resolved? or is there any missing steps? please let me know if you need more assistance.

[Zeb H.]

The issue remains, I can see it happen on most pages using toolset - you can try clicking other links, such as, the Dining page (left menu): hidden link

The business details under each logo is being covered up by overlapping listings. *See attached

It does FIX upon a page refresh or even just slightly resizing the window - but most users won't think to do that... perhaps we can force a quick refresh upon the page loading or a reset at the end of the post template?

[Luo Yang]

I have tried the new URL in my Chrome browser, I don't see the issue too, see my screenshot dining.jpg

Which browser and screen resolution are you using?

[Zeb H.]

I have tried seeing the problem in Chrome, Safari, and Firefox. I can see the problem in all but sometimes I must click a couple of the links from the left menu to see it:
hidden link
hidden link
hidden link
hidden link
hidden link

It's too bad you can't replicate the problem. Perhaps start with a smaller browser window. Also clear your cache so it isn't loading off of memory, (try using an incognito window to simulate being a first time visitor.) Also you could scroll down the page and see closer to the map module; most times at least one listing is being covered up by the map. They tend to bunch up nearer to the bottom of the page.

Can you at least suggest a way to insert a reset or normalization at the end of the post template? These are just ideas I'm thinking may fix the issue.

[Luo Yang]

OK, I can see the issue when click links from the left menu, but the problem does not exists when open those URLs directly, and there are lots of errors in the Chrome browser console window.

You can try to use CSS all revert, for example:

.tb-masonry, .tb-masonry * {
        all: revert;
}

More help:
hidden link

[Zeb H.]

I see errors in Google Chrome regarding the Toolset Maps Module. I'm also using a very similar setup on another website which is showing the same problems: hidden link (if you don't see the issue on this page, try clicking other links from the top menu.)

Thanks for this CSS suggestion, however instead of fixing the problem it broke the style of the listings. *See attached image

I have provided login details for you to access the backend of this website. You have permission to try making changes to fix the issue. We are getting complaints from our advertisers that their information isn't displaying properly. I'm counting on Toolset to do it's job properly. This problem must get fixed!!

[Luo Yang]

The credentials you provided above is not an valid administrator account, so I can not change the CSS codes in it, please check it, make sure it is an valid admin account, thanks

[Zeb H.]

Oh, you're right - sorry about that.
I've now switched the role to be an Admin.

Please try now 🙂

[Luo Yang]

I have tried these in your website, Edit below page:
hidden link
Find and select view block "Accommodation-1", in block setting panel, option "Custom CSS", add below CSS codes:

.tb-brick{
grid-row-end: span auto;
}

Please test it in frontend:
hidden link

It works fine, if it is fixed, then add same CSS codes into other pages

More help:
hidden link

[Zeb H.]

Sadly this still did not fix the issue - Thanks for trying.

The issue is definitely in the Masonry Loop Style. I have now switch the layout on this one page to be Grid instead of Masonry... and it does not overlap at all. It also doesn't look as nice, but the problem is gone.
See here:
hidden link

Perhaps you can have other developers on your team look into the Masonry Loop Style as their seems to certainly be a bug.

[Luo Yang]

Thanks for the feedback, I can reproduce the same problem, and have escalated this issue, will update here if there is anything news.

[Luo Yang]

Change the ticket status to "Escalated", will update here if there is any news.