Mobile Accordion Display Issues After Last Update

For some reason, the accordions are showing up glitchy on mobile.
https://luminacbd.com/faq/

Having two separate display issues.
One of the accordions is nesting, despite me not nesting the accordion.
The other accordion has no gap, despite me using the stock element, which includes a gap.

None of the other accordions on the page are misbehaving like this, despite me using them all in the same exact way everywhere on the page.

Please advise what’s wrong.

Jesse

Oh, and there’s a third glitch. The details inside the second FAQ question in the accordion missing the gap is displaying the inner text as if i failed to close an “a href” tag, and i most certainly didn’t. It’s turning the whole response in that block into a link and it shouldn’t be. Again, all these issues are ONLY on mobile phones.

Great, and now the desktop view is all messed up too.
I really wish you wouldn’t release updates until you have all the bugs worked out.
This is really messing me up right now.

And all the headings on desktop and mobile keep getting “p” tags added to them, which is adding line height spacing above them, which puts them off center with the arrow icon. These updates are just infuriating.

Hi Jesse,

Thank you for writing in, I dont see that last issues (desktop and p tags) on my end, please clear your Cloudflare’s cache and browser’s cache.

Those issue you have on the Accordion element is more likely a broken HTML tag. Please check all your HTML markup, you can use this tool here.

If you don’t see anything unusual please provide us login credentials in a secure note so we can take a look on it.

Cheers!

Hi Jesse,

Thanks for providing the details.

I have checked the page in Cornerstone and found the cause of the issue.

Edit the content of the How long does CBD take to work?. You have added the code:

<a href="https://luminacbd.com/shop/'>CBD product</a>

Please make sure that when you add an attribute value in an HTML tag to use only double quotes together or single quote but not a combination of both because that will cause an issue with the layout.

Try changing ' to ", save the page then it should fix the layout issue.

Hope this helps.

This didn’t resolve the Headline portion of every accordion showing up between P tags.
I put a P tag CSS on the pages custom CSS because there is no line height modulator in the accordion settings.
But it adds P tags on the FAQ titles and adds the line spacing to them as well.
HOw do i make it so the titles/headlines do not get the P tags, or at least how do i exclude them from the line height CSS?

Hello Jesse,

I have manually removed the p tags in your accordion titles. I also fixed the invalid html code you have inserted.
I temporarily deactivated your W3 Total Cache. What needs to be done is for you to log in to your CloudFlare account and purge your site cache. And then you test the page again.

Please let us know how it goes.

Anytime I manually remove them, they reappear on their own.
I can purge the cache using WPEngine Quicklinks.
I put in a ticket about W3C, as WpEngine apparently flags it as a blocked extension and won’t let me use it moving foward.
I asked if there was another caching extension that you know works with the new x theme versions AND isn’t banned by WPEngine.

Hello Jesse,

I have replied your other thread.
Check it here:

Cheers.

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