Footer Appears on the Right Side of Page

[ssiwebdev]

I’ve encountered an issue that seems to affect the pages that are categorized as “Industry” pages on my site. The footer appears on the right side of the page.

The industry pages already published appear fine, i.e. the footer is at the bottom of the page.

But, if I try to preview an already published page or make a copy of the page and publish it, the footer appears on the right side.

I looked at the code of the cloned page (https://www.ssicards.com/test/)

I found an issue with the class x-root {display: flex}. When it is disabled, the footer no longer appears on the right

On the original page (https://www.ssicards.com/education/), however, the class x-root {display: flex} is enabled but the footer appears at the bottom of the page as it should. So I don’t know why one works and the other doesn’t.

The site uses a child theme I created from XTheme (latest version 10.4.13 ), Cornerstone (7.4.13 ), and WP Bakery (Version 7.3 ). There is an update for WP Bakery but it is not available for this version of XTheme.

I found this in the forum where someone else encountered this issue back in 2017:

Footer now appearing on right side of site

I’ll include instructions as we are on those versions

I don’t know how the solution provided will affect the rest of the site since the issue appears to be limited to “Industry” pages as I mentioned.

Any help would be appreciated.

Thanks!

[tristup]

Hi @ssiwebdev,

The issue you mentioned in the screenshot mostly happens due to some broken HTML tags. I would suggest you delete the sections one by one and check if that resolves or not. The last one you deleted before the issue was resolved is the reason behind your problem.

NOTE: I have checked the said page but didn’t find the issue you described here.

Thanks

[ssiwebdev]

So I think I found the culprit. I’ll post the fix so if this happens to anyone else, they know what to look for.

I discovered an additional container that got added to the bottom of the page when the page was duplicated. Once I deleted the empty container, the footer once again appears at the bottom of the page.

Thanks for you’re help!

[marc_a]

Hey @ssiwebdev,

We’re glad that you’re able to figured it out.

Thank you.