Problem with footer shifting in WP

bootstrap

#1

Hi there!
I have this website made with WP and there is a problem with the footer shifting for the right when I hoover on “Send” on the Home page (where the contact form is…)

http://thelaughnplayclubhouse.com

Then when you click on Gallery, the footer is showing the same problem right away.

Problem doesn’t show on other pages.

I’ve spent hours trying to pin the problem and just can’t…

Thanks to anyone who can offer some help! :slight_smile:

Jen


#2

Jen, I don’t see the shifting footer that you have described.

Please post two screen shots: One showing the normal footer before you “hoover” on the “Send” button, and one showing the shifted footer while you are “hoovering”.

It sounds like you could click the Gallery button to cause the footer shift, too.

Whichever way you prefer, please include two screen shots that show the difference.

If you have already fixed the problem, please let us know that, too. :slight_smile:


#3

Hi Ronpat!
Thx for your reply, unfortunately I didn’t fix it no :frowning:

I have attached screenshots of the issue.

Thing is, it happens in Opera & Google Chrome but Firefox & Microsoft Edge are fine… no problem there… Why!!!

Thanks again! Looking forward to your input! :slight_smile:


#4

I could only upload one pic sorry… here’s the Gallery footer. It also appears this way right away even tho I haven’t hovered on the Send button beforehand…


#5

And here’s the normal footer that is well centered…


#6

Try this:

.footer-widget-wrapper{clear:both}

It shouldn’t be needed if you have followed the correct bootstrap sequences but it looks as though a float is snagging somewhere when it shouldn’t.


#7

Just found.

In the stylesheet,
href=‘http://thelaughnplayclubhouse.com/wp-content/themes/lighthouse/style.css?ver=4.9.8

amid the author’s minimized CSS, lives the following rule:

.footer-widget-wrapper {
    background-color:#131313;
    margin-top: -5px;  /* DELETE ME */
}

If one deletes or comments out the negative margin-top (as I indicated), the trouble seems to go away.

PS: it wouldn’t hurt for the OP to validate his/her code.


#8

The problem is that the negative margin pulls the the container up and the float snags on the :after element and then sits to the right. This is because the bootstrap clearfix technique is slightly flawed in that it does not apply clear:both to the :before element as well and thus you can never be sure that you won’t run into a float when you use a negative top margin unless you make sure the element clears the floats above.

Adding a 100% width to the display:table rule (in the clearfix rules) would also solve the problem as then there would be nothing to snag on.

Containing floats and clearing floats is still widely misunderstood even by bootstrap :slight_smile:


#9

OMG… Thank you! Both methods worked perfect!

I so wish I had asked here before spending so much time on this issue…! You guys are so helpful… thanks again!!!

Life’s good again! :smiley: