Footer is cutting off when screen resize.

[sayedtaqui]

Hi all, need your help
The footer of my theme is cutting off in phones and tablets.
If you resize your window and scroll in y-direction, you would see that problem on desktop too. I cannot figure out why its happening, any idea
I have yet not written any media query, or used any script to make it mobile friendly or resize.

Thanks

[Paulie_D]

>I cannot figure out why its happening, any idea **I have yet not written any media query, or used any script to make it mobile friendly or resize.**

Haven’t you just answered your own question?

[sayedtaqui]

That’s right Paulie, but isn’t that still supposed to look the same when you resize the window, with scroll-y. The whole website is looking the same but not the footer.

[Paulie_D]

At a guess, I would say it’s probably something to do with the table nature of the Calendar.

Tables have a history of breaking layouts.

[sayedtaqui]

Thanks Paulie, I replicated the same thing with simple markup, and it does the same, Just trying to understand why it happens? What’s the concept?

Why does that footer cut off when scroll in y direction?

[sayedtaqui]

Okay I think, I get it, the main wrapper has a fixed width of 1100px and footer is supposed to take 100% of the window size, so when we resize the window the wrapper takes 1100px fixed width and the footer take the width of the window, so when we scroll , it cuts off.
Any suggestion what changes should be made to the layout or css to fix this problem?
I just noticed it happens on lot of websites
like this http://fitnessmag-soratemplates.blogspot.in/

[Paulie_D]

Why not take the footer out of the wrapper?

If you need to constrain the footer **content** to 1100px then add an interior div to the footer and put the content in that.

A little but like this: http://codepen.io/Paulie-D/pen/oGKtA

[sayedtaqui]

Thanks a lot paulie got it.

[Author]

Posts