Grow your CSS skills. Land your dream job.

Footer is cutting off when screen resize.

  • # July 14, 2013 at 2:54 am

    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

    # July 14, 2013 at 3:25 am

    >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?

    # July 14, 2013 at 3:29 am

    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.

    # July 14, 2013 at 3:51 am

    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.

    # July 14, 2013 at 3:56 am

    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?

    # July 14, 2013 at 4:06 am

    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/

    # July 14, 2013 at 4:48 am

    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

    # July 14, 2013 at 4:55 am

    Thanks a lot paulie got it.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".