Footer gets pushed into a separate column + other styling issues

[Kelson]

I’m hoping you guys can help me pin down a strange issue that just recently appeared on a site I’m building.

Basically I’ve got a bunch of accordions on a page with some custom styling. It was working and looking great until randomly I was looking at it yesterday and all of a sudden one specific page is having some really weird styling issues that I can’t figure out.

Before when I first built the page, and in the page editor, it looks like this (this is how it’s supposed to look):

However recently on the frontend, in multiple different browsers and viewport sizes, it all of a sudden has started looking like this:

You can see that some of the accordion styling gets messed up and the footer gets pushed to a second column for some reason. I’ve looked through the forums and can’t find anything. The site has a fair amount of custom styling, but even if I remove all of it the issue still persists.

The url of the specific page is http://safeprosafety.net/find-a-representative/.

Can you help me figure out why this is happening? I’ve tried deactivating plugins, but it hasn’t helped so far…

Thanks in advance!

[lely]

Hi Cameron,

Thank you for detailed explanation. The possible root cause of this issue is mismatch html. Please check the page with issue, make sure that all open html tags like <div>, <p>,<h1>, etc have corresponding closing tag like </div>, </p>,</h1>, etc. Excess or missing tag will cause this issue. Html tags should be partners like this <div> content here</div> Do let us know how this goes.

[Kelson]

That seems to have been the problem. I found an extra </div> tag. It’s looking like it should now. Thanks so much!

[ruenel]

Hey Cameron,

We are just glad that you have figured it out a way to correct the said issue.
We really appreciate for letting us know!

Best Regards.