Footer not aligning to bottom of page

Hi all

So im currently nearing the end of my messy website design. And have just learnt as i went along.
On my work page I am trying to align my menu symbol to the bottom of the page in my tablet and mobile device layouts. However it seems to float.

Please could someone help me to understand where i have gone wrong.

Heres a link to my site, and its the work page in tablet and mobile form.

Thanks very much

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @TheBoyGeniuz here’s my suggestion: move the navbar outside the section and then wrap them both with a div (wrapper). Set the div’s height to, let’s say, 3000px, or until you see the footer attached to bottom (you’ll need to set a different height for each view - tablet/landscape mobile/portrait mobile).
BTW you have many collection lists there, isn’t there a way to do that with 1 collection list? maybe using a GRID?

Hi @Naama thank you for your reply.

I think I will have to rebuild the work page from the ground up to be honest as I think this is where things are going wrong.

Regarding the collections list. I initially aimed for one list. I wanted my collections items to animate in individually as you scrolled down the page but they were all animating at the same time. I don’t know if it was a class naming hierarchy issue. I didn’t know how to do it. So hence the multitude of collection lists at this time.

1 Like

Hi @Naama

So i worked out that my section was the culprit. It had a fixed height of 615px which was what was causing the menu to jump to the top of the page.

Thanks again for your help.