Elements disappeared, misplaced or moved on the whole website

Good afternoon,

A lot of elements have been moved, overlapped or disappeared in all the pages.

On the X visual editor, the fonts are huge and you can see most of the elements but out of place.

I update the latest version of X but didn’t change anything.

The site is: https://apneatotalmalta.com/

I would appreciate if you can help me with the issue.

Thank you

Hello @apneatotalmalta,

Thanks for writing in! I have inspected your homepage and it turns out that you have inserted a broken HTML. For example, you inserted this:

<a href="https://api.whatsapp.com/send?phone=35699604676"><font size=4><font color=#ffffff>(+356) 99604676</a>

Please double check your custom HTML codes and then clear all your plugin caches and test your site again. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Thank you Ruenel,

I have checked the custom HTML codes, remove the link you mentioned and clear all the plugin caches but nothing changed.

I added a secure note with the details

Hello @apneatotalmalta,

I have logged in and temporarily deactivated your Cloudflare and W3 Total Cache plugin. Your site is working perfectly now. Most probably, you only have caching issues.

Kindly check out your site. You may reactivate the plugins once you have resolved your issue.

Cloudflare didn’t have any issue, it was W3 Total Cache only. I just changed the plugin for another one and everything seems to work back to normal again.

When I try to edit the front page with Cornerstone, still the fonts are huge and nothing is on the right place. It doesn’t happen with the rest of the pages

Hello @apneatotalmalta,

I checked your site it seems that it is working fine at my end. I would suggest you clear your browser cache and then check it again.

If the issue still persists please let us know with marking screenshoot.

Thanks

Hello prakash,

As I mentioned, the pages are back to normal but when I try to edit the front page in Cornestone, you see this:

Hi @apneatotalmalta,

It seems that the issue is due to the custom JavaScript code added into the Page CSS of the HOME Page. I would suggest you move that code into the Page JS section and check after clearing all types of cache. If you found the issue still exists, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

Hi tristup,

Thanks for your reply.

I moved the code to the Page JS section and cleared all caches but didn’t change anything.

I checked the link you sent me about create a staging server and I rather not to do it. I don’t have any of the mentioned hosts in the article and I read about the issues about doing it with a plugin or manually.

Thanks

Hi @apneatotalmalta,

The staging server is a temporary space where we can test your site by experimenting and troubleshooting the possible cause of the issue. The test we will do that may break your site, and that is why we asked for the staging.
Please let me know if it is possible to have that or we can test the same in your live server. In the case of the live server, I would request you to take the backup of your files and the databases and also provide the FTP/CPanel credentials if require in any case.

Thanks

Hi tristup,

I just did a backup, please feel free to test the site. I saw you already create new pages copying the front page to test.

Hello @apneatotalmalta,

On your homepage, you have added this custom JS:

//
// No need to add script tags
// here; simply get started
// by writing JavaScript!
// Remember to save your
// changes to see them :)
//

<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "a064d.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script >
<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "www-embed-player.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script >
<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "df983.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script >
<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "email-decode.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>

You are not supposed to insert <script> tags because it will just create an error. What you can do is install Insert Headers and Footers plugin where you can easily insert the custom JS code. This is also a way to prevent any conflict and issues with your custom code.

Meanwhile, I have saved your homepage as a template and created a test page. When I load the homepage template on the newly created page, it is displaying properly in the builder. It seems that there is something that caused this issue yet only happens on the homepage. You may need to check out my test page in the secure note below.

Best Regards.

Hello ruenel,

You just duplicate the home page or you modify something else? I cannot see any difference between them and neither the cause why only on the home page is not working.

Hi @apneatotalmalta,

There might be some different reason behind your issue, I would like to inform you that a few hours ago we have released another version of the theme with some fixes, I would recommend you to update your theme to the latest one.
I would also suggest you follow the below steps while updating to the latest version of the theme.

  1. Delete the Cornerstone
  2. Update the X theme to the latest version on automatic updates
  3. After the X theme is updated, use the link in the dashboard to automatically install the Cornerstone. It will be at the latest version

Hope it helps.
Thanks

Hi tristup,

Thanks for the heads up! X and Cornerstone are updated but the home page remains the same.

I noticed that you create two different test home pages (BY themeco and BT themeco) On the first one (BY) editing it in Cornerstone it looks the same as the main page right now but on the second one (BT) everything is back to normal. What was the difference between them?

Something that I just saw is that only on the main page of mobile version you can see a big gap between the menu and the slider. Could it be related? Before all these, the gap was not there.

Thank you!

Hello @apneatotalmalta,

I only created the “Test Bt Themeco” page. I am not sure who has created the other page. I will forward this and asked @Tristup. By the way, you can no longer find the JS code on my test page because I have removed it relocated it in Settings > Insert Headers and Footers > Scripts in the Footer.

By the way, please update to the latest X theme 8.1.2 and Cornerstone 5.1.2. Kindly temporarily deactivate Cloudflare and Lazy load plugin while we are troubleshooting the issue.

Thank you.

Hello @ruenel,

I have just updated X/Cornerstone and deactivate Cloudflare and Lazy Load.

Thank you!

Hey @apneatotalmalta,

Regretfully, I could not find any possible clue why this is happening on your homepage and the home by theme page. To save us time, I would highly recommend that you create a new homepage, load up the homepage template, and then make this newly created page your homepage. As I have mentioned before, there could be a setting or custom code somewhere that affects the current page that serves as your homepage. One thing I know for sure is that it does not affect the other pages.

See the secure notes. for the test pages that do not have any issues.

Best Regards.

Hi @ruenel,

Now I cannot edit any page in Cornerstone, I receive the following error: “The preview could not load due to the iframe response being incomplete…”

Hi @apneatotalmalta,

The reason why you can’t edit your pages because of your autoptimize plugin, I went ahead and untick the “also aggregate for logged on users” so that you will not have any conflict with the builders.

Hope that helps.

Thank you.