Hi Guys,
I found a strange problem when checking my site on a different browser (than firefox). In firefox there was no problem but in edge and chrome there is the following:
look at my site: protecco.nl/protecco2
The problem is that all rows which have a full or full width streched setting, the alignment is completely messed up. I all moves to the right (on desktop), on mobile it is also a mess.
I have looked at all settings and could not find any cause. Also switched to the standard corp theme (from child) but no result. I can’t think of anything anymore.
Also I noticed that on loading the page, it looks ok (only the top hero tekst is not loaded), but as soon as you move the mouse over the page (or scroll), fonts are loaded and aligment is also messed up. So i noticed that fonts are loaded only after some action, and this is when things go bad.
Hopefully you can think of a cause and solution.
Thanks in advance, Niek.
PS: I use the child theme for adding filters, see my previous posts
Hi Guys,
I have been searching for the cause of the problem and found that it lies in the Litespeed plugin setting: page optimization>JS settings>Load JS deferred. This setting was on “delayed”. When setting this to “off” the problem was solved.
However, this brings back a previous problem; High Cumulative Layout Shift (CLS) which was discussed in one of my earlier threads.
I have noticed that the problem is not consistant. When setting everything back to the original settings (including the delayed JS), the page loads completely only after a scroll or mouse movement, but now the aligment is good (tested on different browsers). And also the CLS is low again.
I could not determine what messed up the alignment in the first place. Hopefully you have any idea so I can prevent this happening unnoticed again.
I have setup a second test site to compare if you want to have a look.
https://staging.protecco.nl/protecco2/ Here JS delay is “off”
https://protecco.nl/protecco2/ Here JS is delayed
Awaiting your reply,
Regs, Niek.
Hi Niek
Thanks for reaching out.
I’m glad to hear you’re making some progress.
In order to work with all themes without any customizations, Page Builder full-width rows use JavaScript to break out of the theme’s main container. If you delay the JS then it makes sense that the container break out would come later.
Page Builder offers full-width containers using CSS as an advanced customization. You can read more about the customization at Page: Advanced Customizations. Unfortunately, we aren’t currently offering much support on this customization within our free support scope. If support is required for this customization, it’s usually technical which is a better fit for our premium support scope where we have the budget to assist.