How to position footer at the very bottom of the page?

Highlighted
Excursionist
38 0 4

Hi all! Right now my footer isn't at the very bottom of my page: so if the screen is very large, then the footer will not put itself at the bottom of the page (screenshot below).

How do I make it so that my footer is positioned at the absolute bottom of the page on all my pages? Currently it looks like this on my Product, (Login, Password Reset, Register), (Account, Addresses) pages. 

Please please help : (   

 

 

0 Likes
Shopify Expert
196 0 23

Hi Steve,

Can you provide your site url? We will need to view your site html in order to help you out :)

Thanks,

Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
1 Like
Excursionist
38 0 4

sure thing! mini-shaker.myshopify.com "chooni"

0 Likes
Shopify Expert
196 0 23

Hey Steve,

This is a very common problem. Here is an article on the matter: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

For your site try this css out:

@media (min-width: 590px) {

    html,body {
        margin:0;
        padding:0;
        height:100%;
    }
    #PageContainer {
        min-height:100%;
        position:relative;
    }
    .header-wrapper {
        background:#ededed;
        padding:10px;
    }
    main.main-content {
        padding-bottom:109px; /* Height of the footer element */
    }
    footer {
        width:100%;
        height:109px;
        position:absolute;
        bottom:0;
        left:0;
    }

}

I used what is known as a media query (the @media (min-width: 590px) part) so that it only does this when the browser window is wider than 590px. This way it does not mess up the responsiveness on small mobile devises.

Cheers,

Ryan

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes