FAQs and other site elements not working

Support
#1

Hi, I’m trying to launch a website but as soon as I enabled SSL in Wordpress certain Pro features began not appearing correctly. For example, the FAQ page uses standard accordion elements in cornerstone, but when I view the page they aren’t showing up. When I view it in the Pro editor they show as accordion elements in the left side, but when viewed as a web page they don’t show up properly.

I’m out of ideas and the only thing I can think of is that it has to do somehow with the SSL / https:// being turned on, as it was working fine yesterday before I enabled that. Please help!

#2

Hi @josephrice,

Thanks for writing in.

I could not see any problem with your SSL or there are no errors showing up. Would you mind sharing us more details before this conflict shows so we could easily debug the problem. Please share us also your admin credentials so we could check your setup closer.

Don’t forget to set it a secure note.

Thanks.

#3

I’ve added the credentials in the secure note. The most obvious problem is that the FAQ page is not showing the accordians, they show up as just text instead of the expandable stuff. Other issues are the footer not being centered, the shopping cart button shows the cart information off the screen to the right, and some other random things. As I said before, everything looked as it was supposed to yesterday prior to switching the site to https://

#4

The credentials are incorrect. Please check.

Thanks.

#5

I’ve updated the credentials, sorry about that. Now the issue seems to be isolated to the mobile version. I cleared the cache on Cloudflare and now the desktop site works fine, but if you load the FAQ page on mobile it doesn’t work properly.

It views fine in the cornerstone editor when you select mobile as the layout but when viewed on a phone it doesn’t load the page correctly.

In addition, the menu and search are showing up on mobile which are supposed to be hidden in the header builder. It seems to be related because that was the behavior of the desktop site prior to it beginning to work properly. Again, the only thing I can think that I did was empty the cloudflare cache.
Thanks
joe

#6

This is happening to me too

#8

Hey @josephrice,

I have investigated your site and I could see that you are using CloudFlare. Please login to your account and purge everything. For best results, please follow the suggested CloudFlare settings from this tip: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

For your mobile issues, this might just be a caching problem. Please do clear your mobile browser cache or use private browsing mode and test your site again.

@SE1217707:
I am seeing your accordion element and it seems its working perfectly:

And to resolve your accordion title issues, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.cs-content .x-accordion-heading .x-accordion-toggle {
    background-color: red;
    text-transform: capitalize;
}

Feel free to change the red color to the one that suits your site design.

Cheers.

#9

That seems to have done it, thank you for the cloudflare info as I use that for most of the sites we work on. Appreciate it!

#10

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

#11

what about the text color for both the header, body, and also removing the little grey lines? how can i make the background transparent for both the header and body?

#12

Hey @SE1217707,

Please add the following code in your Customizer as well:

.x-accordion-toggle {
    background: transparent !important;
    color: #000 !important;
}
.x-accordion-heading .x-accordion-toggle.collapsed:before, .x-accordion-heading .x-accordion-toggle:before {
    color: rgba(0,0,0,0.25) !important;
}
.x-accordion-inner {
    border: none !important;
}

Hope this helps!