Hi,
I'm building a catalogue of courses for an academy and I'm getting a few styling issues.
1. First of all, there is additional spacing around the items in the hero banner and table of contents on course pages.
2. My second issue is with Accordion. You can see that all the accordion items load open, instead of just the first one. Also, both open/close icons are displayed at the same time. I tried adding the Toggle widget instead. It is malfunctioning the same way as the Accordion widget.
I've already reached out to Elementor about these issues and I got the following reply: "According to your described issue, it seems the issue is happening due to the Toolset's CSS overlapping the Elementor's CSS … we highly recommend that you report this issue to the support team for this plugin so they may further troubleshoot and provide any recommendations (or possible fixes) to resolve this issue."
Thanks so much,
Gabriel
Hi Gabriel,
Thank you for contacting us and I'd be happy to assist.
Looking into the single course page's code, I see some script errors in the browser's console, related to the 'Facebook Chat Plugin'. The script errors can affect the normal functionality of scripts like the ones used by accordion and toggle elements.
To troubleshoot this, I'll suggest the following steps:
1. Please make sure that WordPress, active theme, and plugins are all updated to the latest versions.
2. It would be interesting to test this with all extra plugins disabled (i.e. only keeping Toolset and Elementor active) and a default theme like Twenty Twenty-One.
If it's fixed, you can start adding the disabled items, one by one, to narrow down to a possible conflicting one.
3. In case the issue still persists, I'll need your permission to download the clone/snapshot of the website, to investigate this on a different server.
I hope this helps and please let me know how it goes.
regards,
Waqar
Hi Waqar,
Thanks for getting back to me and sorry for taking so long to reply.
- I've deactivated Facebook Chat Plugin and tried again. Still the same issue.
- Then I tried deactivating everything except for Toolset and Elementor and I still have the same issue.
Let me know what you need from me to take a look, please.
Thanks,
Gabriel
Thank you for sharing this update.
Do I have your permission to download a clone/snapshot of the website to investigate this on a different server?
Thank you for the permission and I've downloaded the website's clone.
I'll be performing some tests and will share the findings, as soon as this testing completes.
Hi Waqar, just wondering if you found a solution to my issue, please?
Thank you,
Gabriel
Hi Gabriel,
Thank you for waiting as this investigation turned out to be more complex than I expected.
I'm still working on this and will share the detailed findings with you shortly.
Thank you for your patience.
regards,
Waqar
Thank you for waiting. I was able to narrow down the cause of the missing styles from the Elementor.
During testing on a clean test website, I couldn't reproduce the issue. On your website's clone, the issue persisted, even when I switched to a default WordPress theme and deactivated all plugins except the Toolset Types and the Elementor.
This led me to believe that it has something to do with how Elementor is configured on your website. While trying out different Elementor plugin settings, I noticed that the issue is fixed if the 'Improved CSS Loading' feature is disabled.
( WP Admin -> Elementor -> Settings -> Features -> Stable Features )
You can try out this fix on the live website too and report the behavior of this option to the Elementor support team, for further investigation.
That seems to have been it! Thank you!
