Pro Preview not loading properly (displaying no styles)

Hi there,

I am having a problem with a few websites I am currently developing.
I create the page in Pro (which displays fine).
When I go back to edit the page, the styling in the preview is not displaying.
This means this is very difficult for me to build a page, as the styling is gone from the preview when I return to make changes from a client, but still displays on the front end correctly. If I add new elements they display correctly, but when I return to edit the styling is gone from the preview again. This is happening in Chrome and Firefox.

Why is this happening?

I am using all the regular plugins that I normally use (very light, mostly yours), and this has never happened before.

Please see below for the plugins I am using, the homepage for how it normally looks, and the page in Pro when I go back to edit (with styling missing from the preview). Please help, and let me know if this is a known bug, as I feel this defeats the purpose of Pro in being a WYSIWYG page builder.

Awaiting your advice, please see below for a link to the site and for images to show what I mean.

Website:

http://www.simplysignspreview.com/artdecolondon

Plugins I am using

http://www.simplysignspreview.com/artdecolondon/wp-content/uploads/2018/07/plugins-preview.jpg

Homepage - how it looks front end

http://www.simplysignspreview.com/artdecolondon/wp-content/uploads/2018/07/homepage-normal.jpg

Homepage - how it looks when I try to edit in Pro (displaying no styles)

http://www.simplysignspreview.com/artdecolondon/wp-content/uploads/2018/07/homepage-preview-not-working.jpg

I have turned off all plugins, and have activated them one by one.
The issue seems to be with Envira Gallery, which is a plugin that is bundled with this theme.
I have just updated it to the recent version provided with the bundle (from Themeforest), and the problem persists.

If you have any advice for me why this is now causing a conflict with your theme I would be most appreciated. I use Envira Gallery with all of my web projects so this is very inconvenient.

Hi There @EarlySigns

Thanks for writing in and glad you were able to isolate the issue.

To further troubleshoot, please check your PHP version running on your server and make sure that you’re running PHP v5.6.x or later to avoid incompatibility issues.

Also check your PHP memory limit allocated on your server and update if necessary by following our guide here (https://theme.co/apex/forum/t/troubleshooting-increasing-php-memory-limit/16935).

If you don’t know how to check your server configurations, you can use this plugin (https://wordpress.org/plugins/wp-serverinfo/) to see those information within your WordPress backend.

Let us know how it goes.
Thanks!

Hi there,

Thanks for coming back to me.

I am on PHP 7 so shouldnt be an issue there.
I’ve added the extra line of code to define the PHP limit in Wordpress in the WP Config file.
I have also added the plugin to see what my server configurations are, and still nothing improved.
Here is what the plugin is saying below.

Can I ask - do I need to set this up every time in the future, as Pro and it’s bundled plugins used to work out of the box? I am not sure why there are issues like this on this months update?

I have seen lots of issues with Envira Gallery in the comments section recently. It is a little concerning. I am starting to wonder if you can recommend one that works with Pro and one that you can recommend? I might start using another one if you can. Many thanks.

General

OS: Linux
Server: Apache/2.4.33 (Unix)
Hostname: www.simplysignspreview.com
IP:Port: 10.0.230.17:80
Document Root: /home/sites/simplysignspreview.com/public_html
PHP

v7.0.30
GD: 2.1.1
Magic Quotes GPC: Off
Memory Limit: 256.0 MiB
Max Upload Size: 64.0 MiB
MYSQL

v10.1.27-MariaDB
Maximum No. Connections: 1,024
Maximum Packet Size: 64.0 MiB
Data Disk Usage: 6.1 MiB
Index Disk Usage: 512.0 KiB

Hi @EarlySigns,

What was given are just part of troubleshooting to confirm the cause of issues? You don’t need to do it on every update. Since it doesn’t have any effect, then we’ll have to look in a different way and investigate it.

And I can’t verify this issue of Envira Gallery of my end, the styling are both the same on preview and actual page. With this, I may need to investigate it directly from your site. Would it be okay if you’ll provide your admin login credentials in a secure note?

I would be more happy to gather enough information to narrow down the search for possible causes. If it’s a bug, then I’ll add this to our issue tracker.

Thanks!

Hi there,

Thanks for getting back to me.
I can confirm this issue with at least 3 of my websites.

http://www.simplysignspreview.com/artdecolondon/


http://www.creativelivingse.co.uk/

I am providing a secure note for the admin credentials for the art deco website, since it is in development.
Many thanks.

Hi,

When Envira is activated I can see the following error in the console.

So it looks like envira is causing a problem to revslider and that could be preventing the styles from loading…

Please validate your theme and update revslider to version 5.4.8 as that is the compatible version with the latest version of the theme

Thanks

Hi there,

I have updated the Rev Slider to version 5.4.8. and the problem persists.
Anything else you can help me with?

At the moment, the only workaround I have is to edit in Pro with Envira Gallery deactivated so I can see what I am doing when editing pages. Many thanks.

Hi,

I turned on javascript insert to footer in Slider Settings and that seem to have fix the issue.

Kindly check in your end,

Thanks

Hi there,

I would have never guessed to do that, that has worked.

So can I ask - do you know why there are Java conflicts between Envira Gallery and Revolution Slider, as they are bundled plugins and this seems rather odd? I imagine that other customers will come forward soon with the same issues/confusion.

Hi There @mldarshana

Thank you for your patience. I have reported this incident to our issue tracker, so that our developers can review it further.

Thanks!

Hello,
We are having the same issues on our site. I have been through this post and checked/implemented each fix and it isnt working.
This is the screenshot from the Console which shows the errors - can you tell me what i need to do to fix it?

This is what is shows on the front-end

And this is the backend veiw…

Iv’e just discovered it is a javascript from hubspot that is causing the issue. they give us this code to load their forms.

[CODE]

[/CODE]

Is there any way we can insert this code without interfering with the preview?

Hi,

You may install this third party plugin, then add your code in Scripts in Header or Scripts in Footer
Please check instruction from hubspot as to where you need to add that code.

Thanks

Thanks @paul.r.
I think it is more to do with the script itself on the page.
i have tried just adding this code only into a content area element and it still causes the preview error:

<script> hbspt.forms.create({ portalId: "000000", formId: "000000", css: "" }); </script>
Hubspot just say to include the code in the HTML code where you would like the form to appear.
Just to make it clear - it still works on the front end - its just the preview that it causes an error with.

Should i be putting the code into a different element or will it not make any difference?

Hi,

You can try adding it in a raw content element instead.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.