[Resolved] Container border is not showing on mobile

[Author]

Posts

[Gunawan]

I am trying to:
I have a View with a Container inside. I chose a grey 1 pixel outline for this Container. The grey outline is showing on the web browser. However it is not showing on the mobile.

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

I expected to see: Grey outline on both web browser and mobile

Instead, I got: The grey outline is only showing on the web browser. I did not see the outline on the mobile

[Luo Yang]

Hello,

I have checked the URL you mentioned above, I did not see any Grey outline, see my screenshot gray.JPG

And I see some JS errors in my chrome browser console window:

siteground-optimizer-combined-js-abea5a6f489b364f88d9069b0c352e3a.js:1 Uncaught SyntaxError: Identifier 'wpvViewHead' has already been declared

It seems to be a compatibility issue, please try these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2020, deactivate all custom PHP/JS code snippets, and test again

3) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

[Gunawan]

Hi Luo Yang,

1. I just downloaded and installed the newest version of Toolset plugins.

2. I have deactivated Astra Theme. This particular theme should be compatible with Toolset. However, I have followed your instruction and installed the wordpress twenty twenty theme.

Upon doing these, here are the results.

On the web browser which is the latest Chrome Version 84.0.4147.105, the grey outline is showing. Please see attached.

On the mobile, now ALL Container outlines are missing. Previously, it was only not showing up for the View only. Now, all the outlines are not showing on all pages.

Please advise. Thanks!

[Luo Yang]

I have checked the URL you provided above again:
hidden link
I still see the JS errors, see my screenshot JS-error.JPG

Please try as I mentioned above, check the compatibility issues.

If you need more assistance to locate the compatibility issue, please provide a full copy of your website in below private message box, I need to test and debug it in my localhost
https://toolset.com/faq/provide-supporters-copy-site/

[Luo Yang]

Thanks for the details, I can install the duplicator package you provided above, with below steps:
1) Activate Toolset Blocks + Types plugins
2) Test the post "All Chicken Dishes" in front-end with Chrome browser, it works fine in both desktop and mobile version, see my screenshot border.JPG

and there isn't JS errors in my localhost.

Is there any missing steps?

And I have checked the URL you mentioned above:
hidden link
I see the JS errors still persist.

[Gunawan]

When you tested it for mobile view, did you test it on the web with mobile view? Would you be able to test it on the actual phone?

I just retest on my cell phone, the border still now showing. Also, I just found out that the Drop Down Menu is not working as well. In other words, when there is a View with Container Border, not only the border is missing. But the drop down menu is not working as well. While on all other pages, everything is fine.

Would you be able to test in on the actual mobile phone? Thank you!

[Luo Yang]

Yes, I have tested it with actual mobile device, it works fine, so this should be a compatibility/server issue of your website, you can also private your website credentials + FTP access in below private message box, I can try to locate the problem in your website. thanks

[Luo Yang]

Thanks for the details, I can login your website, but your website is using other plugins/theme, please backup your website, then update here, I need to deactivate plugins/theme in your website. thanks

[Gunawan]

Please go ahead and deactivate all plugins and theme. I have backup. Thanks!

[Luo Yang]

Thanks for the confirmation, I have done below modifications in your website:
Network Admin-> Plugins, deactivate plugin "SG Optimizer", test it again in front-end both desktop and mobile devices, it works fine, no JS error any more, can you confirm it? thanks

[Gunawan]

It worked now! Thank you so much! SG Optimizer is the plugin from my web hosting Siteground. Is this mean that in order to be able to use Toolset, I am not able to use SG Optimizer at all?

[Luo Yang]

That means the SG Optimizer plugin conducts the JS errors and conflicts with Toolset plugins, you can check it with the plugin author of SG Optimizer, check if it is possible to fix the JS errors, if they can not, then you will need to deactivate that plugin.

[Gunawan]

Understood. Thank you so much for your help! 🙂

[Gunawan]

My issue is resolved now. Thank you!