Avatar of Melody Scott
Melody Scott
Flag for United States of America asked on

misplaced footer on several pages.

Hi, on mobile, a lot of pages are showing the footer floating up over the content on http://clinica-americas.com/. I'll upload the client's screenshots, and name them the url they reference.

ON the second shot, it could be: http://clinica-americas.com/english/services-dr-noe.html, but it could be any of the links on the left. I'll try to narrow it down.
Screenshot-2015-08-30-21-01-25.png
Screenshot-2015-08-30-21-06-19.jpg
Screenshot-2015-08-30-21-06-40.jpg
Screenshot-2015-08-30-21-08-56.jpg
CSSWeb DevelopmentHTMLBootstrap

Avatar of undefined
Last Comment
Melody Scott

8/22/2022 - Mon
Snarf0001

Hey Mel,

Sorry for delay, been a "fun" day.  So it looks like you have a few issues going on.
The first one you posted works fine for me, but probably shouldn't...
In that one, you have the main footer INSIDE the .wrapper object, which semantically it probably shouldn't be.  But that one displays fine for me.

For the other two, which are overlapping (meaning #3 and #4, no url provided for #2), you have a specific height:75px set for .wrapper which is what's messing up the footer.  if you remove that height element, it seems to display properly.
Melody Scott

ASKER
Thanks, and no problem, I'm very glad to hear from you. :) I''ll go over those pages now.
Melody Scott

ASKER
OK... I'm not seeing what you're seeing at the moment. If I look at it in bootstrap, and click the wrapper, I don't see a height.

css
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Melody Scott

ASKER
OK, I took everything from end of content down from this page: http://clinica-americas.com/english/about.html

and put it into http://clinica-americas.com/english/about-dr-nena.html.

I think that worked, would you mind checking http://clinica-americas.com/english/about.html on your phone? Thanks.
Snarf0001

Sure, in the meantime, the issue was on line 37 of style.css:

@media only screen and (max-width:529px) {
	.wrapper, #Stage {
		background-size: 145% 100% !important;
        height: 75px;
	}
    #logo-responsive{
        width: 70%;
    }
}

Open in new window

Melody Scott

ASKER
Thanks, I'll remove that.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Snarf0001

Have a look at the screen cap, there's still a few orphaned / missing end tags:
endtags.PNG
Melody Scott

ASKER
Thanks, I'll get rid of those.
Melody Scott

ASKER
Hi, I went through it. On the lower section, I now have it like this. I've highlighted the beginnings and ends or rows, and it looks right to me, How does it look on a phone? My emulator still says it isn't fixed. Thanks

rows
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER CERTIFIED SOLUTION
Snarf0001

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Melody Scott

ASKER
Thanks a bunch! I'll ask the client if it works on his phone now, and we'll go from there. Thanks for all the help.