Footer looks great in builder, doesn't look same on page

Hello,

Footer not displaying correctly when visiting page it is applied to (https://agentmatch.realty/victoria) but looks great in the footer builder. Please see attached screenshots.

Hi Roman.

Please follow the steps below:

  1. Go to Pro > Settings and click on the Clear Style Cache button.
  2. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  3. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  4. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  5. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

Hi Christopher.

Tried your suggestions but unfortunately I haven’t been able to fix this.

Hello There,

It seems that you are having caching issues. I found out that your are using CloudFlare. Please keep in mind that after making any site changes like your custom header and footers, please login to your CloudFlare account, purge your site cache first before you test your site. This will make sure that the latest changes will take place and not the cache version. For best results, please make use of the recommended CloudFlare settings when using Pro theme. You can check it out here: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Hope this helps.

Hi. Thanks for your help. I’ve purged the Cloudflare cache and disabled cloudflare temporarily, yet the problem still persists.

Thanks.

R

Hi @roman777,

I have tested your footer in a different page and it is working well. I believe that there is something in your page that causing your footer not to look well. It could be there is a CSS or one of the content of your page. I recommend that you will test it by creating a duplicate of the page then remove the content and the CSS one by one to see what causes this broken footer.

Let us know how it goes.

Thanks.

Hi Nico,

I did what you recommended, and it worked, until I applied the “Victoria” header to the new page. Once that particular header is applied, then the footer breaks. Very strange…maybe a bug??

When you remove the “Victoria” header on either page the footer then looks normal. How would I fix this?

Thanks.

R

Hi There,

Please clear and deactivate all your caching plugin and optimizer plugin to make sure that your site is giving us the accurate look of the page. I can’t properly check the header (victoria) for now because it can’t load because of number of errors on your site and few (if not most) of that is caused by the optimizer plugin, please clear and deactivate your caching and optimizer plugins.

Then navigate to Theme Options > CSS and address this couple of things.

h1,h2, h3, h4, h5, h6, #site-logo,.h-responsive .post-title,.x-accordion-toggle, .widgettitle {
    font-family: "Gotham-Light"; !important;
}

Please remove that extra ; next to "Gotham-Light"

And

, #site-logo, .post-title,#custom-headline,#h2.h-custom-headline .widgettitle {
    font-family: "Gotham-Book"; !important;
}

Please remove that , at the beginning and remove that that extra ; next to "Gotham-Book"

Again please clear and deactivate all your caching and optimizer feature, for now. This is an important part of troubleshooting.

Thank you,

Hi. Thanks for all your help. I had the autooptimizer plugin enabled for only the last hour or so, must have been when you checked the site.

I’ve removed the extra periods and semicolons as you’ve requested.

Thanks.

R

Hi There,

Yes, I see that you address the couple CSS issue and deactivate the autoptimize plugin.

But I am still seeing the generated CSS as being minified.

Do you have other minifier/optimizer feature on your site? Maybe a server-side?

The CSS being optimized is not really the direct issue, but if you have a syntax error even on just one of your CSS rule and it will be minified with others, it became problematic. Here’s one as an example.



I am seeing a habit here that you’re adding the ; before the !important statement instead of after.

I see that (h1,h2,h3,h4,h5,h6,#site-logo,.h-responsive .post-title.....) part is coming from Theme Options > CSS. But that area is cleared now. I try to find where are the rest of your Custom CSS is coming from but I could not find it, specifically that custom CSS before the line that I highlighted on my screenshot. It has something to do with gradient background.

If you could point where did you add that it will be helpful.

Thanks,

Is it possible that the Autooptimize plugin left the CSS minified even after disabling the plugin? I just reactivated it but went into the plugin settings and turned off the minification of CSS and all other optimizations, then saved and emptied the cache.

Besides that plugin, I am not aware of any other optimizer on my site, nor server side.

Possible that the CSS you just referenced (gradient) is coming from the custom CSS editor in Cornerstone on the particular page you were visiting?

Thanks again for all your help. Really appreciate it.

R

Hi Roman,

Found it! it’s on the Element CSS of the button element on the Victoria Header



I commented out that entire CSS rule for now and that makes the Victoria footer works.

Please audit all the custom CSS you added on the site/elements, and check it here if those are valid CSS.

Hope it helps,
Cheers!

THANK YOU!!

Appreciate this so much.

R

We are delighted to assist you with this.

Cheers!

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