Footer won't stay at bottom

I am trying to figure out how to get the footer of this page, https://testmage.cluster.helpmefence.com/store/resources-1.html, to stay at the bottom. I cannot recreate this in codepen because many files go into making our pages. Any help would be appreciated. TIA!
41 Replies
b1mind
b1mind•2y ago
I prefer the Grid method personally but both are valid and work well. Just watch out with strict heights (use min-height) and viewport units as mobile might miss behave.
Spiritual Tech
Spiritual Tech•2y ago
This means I have to turn the body or container for the whole page into a grid or flex box, correct? I can't do that. Our pages are very complex and won't be the same if I change then to flex or grid
b1mind
b1mind•2y ago
Yes and if that is the case use a wrapper
Spiritual Tech
Spiritual Tech•2y ago
I read about that solution. I also achieved what I want with Javascript, but it delays and my boss didn't like the delay. We have a wrapper in place
b1mind
b1mind•2y ago
You don't want a JS solution
Spiritual Tech
Spiritual Tech•2y ago
I found that outr
b1mind
b1mind•2y ago
heheh
Spiritual Tech
Spiritual Tech•2y ago
We have a .main-container and a .wrapper on each page
b1mind
b1mind•2y ago
You have the solution figure out how to implement it
Spiritual Tech
Spiritual Tech•2y ago
Okay, but I can't figure it out. That's why I'm here asking for help. I have turned the wrapper into a flex box, but justify does nothing. I put flex on .page, which is the content on the page and when I used justify, it made all the divs very big and stretched out.
b1mind
b1mind•2y ago
The page you linked?
Spiritual Tech
Spiritual Tech•2y ago
Yes
b1mind
b1mind•2y ago
So again I would use grid. You will need to give .wrapper height: 100%
b1mind
b1mind•2y ago
vince
vince•2y ago
This is a bit unrelated but looking at the source of the page I recommend checking out a css methodology like BEM. Your class names are going to get unmaintainable very quickly imo
b1mind
b1mind•2y ago
noooo BEM is horrible (spicy take)
Spiritual Tech
Spiritual Tech•2y ago
I'm at my job. The classes are what they and have always been that way, I can't change them. They are 10 years in the making.
b1mind
b1mind•2y ago
If they have a Design System you will use it that is what it is and probably best 😄
Spiritual Tech
Spiritual Tech•2y ago
Okay, it's hard to see the screenshot you shared, I put all the styling on the elements that I could see and the page isn't right. Also, this is our test site, so it might look unkempt.
b1mind
b1mind•2y ago
.wrapper {
height: 100%;
}

.page {
display: grid;
min-height: 100%;
grid-template-rows: auto auto 1fr auto;
}
.wrapper {
height: 100%;
}

.page {
display: grid;
min-height: 100%;
grid-template-rows: auto auto 1fr auto;
}
is all i did not sure why I can't min-height the wrapper and I'm still drinking coffee but .. all the content looks like it falls into page so it should be fine. oh you could make it grid/flex it probably would mmm it will but there is some ::after below .page I have no clue why
b1mind
b1mind•2y ago
that looks like some 10year old code lol clear float fix? idk
Spiritual Tech
Spiritual Tech•2y ago
Yes, it's been reworked and reworked and reworked over and over and over again. I have been weeding through our 20k line-long master css file and deleting anything that is no longer sued, but it is a work in progress. I have those styles on the elements now and it doesn't work. Did you look at the css for those elements? I have a min-height set on the wrapper already.
b1mind
b1mind•2y ago
but without grid its doing 0
Spiritual Tech
Spiritual Tech•2y ago
Grid is set on the .page class
b1mind
b1mind•2y ago
as a block element its not going to expand less its strict height: 100% like body/html cause.... browsers.. css blah blah lol I swear it used too honestly but I wont get into that
Spiritual Tech
Spiritual Tech•2y ago
haha I have the wrapper set to 100% min-height
b1mind
b1mind•2y ago
make it grid and delete that ::after lol I really have no clue what that is for I mean make sure you don't need it first ofc but looks like some old float hack code left behind from the early 2000's
Spiritual Tech
Spiritual Tech•2y ago
Oh, okay. Make the wrapper a grid or .page a grid? Yes, probably.
b1mind
b1mind•2y ago
both yes
Spiritual Tech
Spiritual Tech•2y ago
so page and wrapper needs to be a grid?
b1mind
b1mind•2y ago
to accept a min-height: 100% yes cause you have to pass that height down if that makes sense
Spiritual Tech
Spiritual Tech•2y ago
Yes it does.
b1mind
b1mind•2y ago
% can only be of its parent so 😄
Spiritual Tech
Spiritual Tech•2y ago
Okay the :after is gone!
b1mind
b1mind•2y ago
ok this link must not be updated xD, lemmi know if you still have troubles update the demo for me and I'll gander at it.
Spiritual Tech
Spiritual Tech•2y ago
You have to ctrl+f5 on chrome to clear the cache. I added grid to the wrapper and it worked, but everything is centered. IT'S WORKING! THANK YOU SO MUCH! AGAIN! You are a life saver!
b1mind
b1mind•2y ago
w00t gj! also np I had the time sitting here procrastinating so glad I could help 😄
Spiritual Tech
Spiritual Tech•2y ago
Yes, thank you for your intelect. You shouldn't procrastinate, nothing gets done. lol Have a fantastic day!
b1mind
b1mind•2y ago
you too!
Spiritual Tech
Spiritual Tech•2y ago
You're a very good person for just being here to help people. It doesn't go unnoticed.
Want results from more Discord servers?
Add your server