Strange behavior, messing up the home page frontend, in builder layout is showing correct, not able to choose biggest screen size in editor

I’m experiencing some strange behavior after updating (I guess). Since yesterday I’m having some strange behavior, some of my pages layout changed all of a sudden. For example on some pages my layouts switched around (left and right column content switched around).

My homepage is not showing correct on the frontend at all, in the builder it does show correct, I’m not sure when and how this happened but on the homepage I noticed these changes after installing and working with the Yoast plugin.

Also before installing this I noticed that in the builder the biggest screensize is not selectable, what I mean is that i can edit it but it will not show in the builder, only the second biggest screen size will show in the builder (and will turn blue in the selection panel).

I will add a secure note with the login details.

Thanks.

So I managed to solve the layout but there is definitely some strange behavior going on. On the homepage there was a section copied all of a sudden which was probably causing some problems, no idea why this happened and after removing this section everything showed up correct. So for now I’m happy with that.

The other issues still persist.

Hi @SchoonhovenOntwerpStudio,

Thanks for the heads up on this. I’ve tried logging in to check it out but I don’t think the account has the right permissions. Could you set it to an admin role? Thanks!

Hello Alex, sorry for the late reply, I have been away for a few days. I will look into the user role tomorrow and will get back to you. Thanks for looking into it

Hello @alexander the user role is changed so you should have full access now.

Cheers!

@alexander I would like to add something to the strange behavior… At one of the pages the behavior changed, after inspection I found the following JS code on the page:

$(document).on(“scroll”, function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $(“section”)

for (var i = 0; i < tags.length; i++) {
var tag = tags[i]

if ($(tag).position().top < pageBottom) {
$(tag).addClass(“visible”)
} else { $(tag).removeClass(“visible”)
}
}
})

I might be getting crazy but I can’t remember adding this code, so I don’t know where it came from or what it does (apart from taking away the functions that I added). After removing this the page is behaving as I intended. So maybe this information helps on finding the problem.

Hi @SchoonhovenOntwerpStudio,

I apologize for not getting back to you sooner. Good to hear you got it working. I checked your site and the front end looks the same to me as in the builder. It’s possible that the Javascript code was causing an error that prevented the page from fully loading. I did notice you’re using both W3TC and Litespeed Cache. Using multiple caching plugins could be problematic as neither expects another caching system to be active and you could get stale cache results getting “stuck”.

@alexander no worries, just to give a bit more info, the behavior started before adding any caching plugins. I understand what your saying about having 2 caching plugins but I did extensive testing and honestly I couldn’t be happier with the results, 92% for mobile and 99% for desktop with Google pagespeed.

Anyway thanks for looking into it and when I would run into a similar problem on a different site I will let you know :slight_smile:

Sounds good!