Is there a way to have the footer fill screen on large devices? I have it set up at margin auto; It looks good on smart phones but when it comes to large screen it doesn’t fill. any advice?
Thank you in advance.
Sure just do the following:
-
Create a Container and give it a variation of footer class so you know what it is. I called mine “footer-bottom” because I had a 2 layer footer.
-
Make sure it’s fluid.
-
Give that a width of 100% and it will stretch the screen size.
-
Add a Footer inside of that container and adjust the Flex of the Container (not the footer) so that it will center your content unless you want it stretching forever that is lol. Your call there.
Do the rest as normal and you’re all set.
You can see what one of my client’s sites looks like with it here:
P.S. Ignore the content, not meant to offend, its just the only one using it for another few weeks so … yeah. 
Hope that helps!
Hello,
Thank you for your response, I have done as you sugested but the container on my part doesn’t stretch!
Can you link your site please? I’ll see if i can find the issue.
Looks like you did what I did originally and eventually I realized it was backwards lol. You have the container on the inner element, and the Footer on the outter element. Swap that around and it should work. Your "Container should be the parent container, then your Footer should be the only child of that parent container. Your contents then go inside the Footer where you can use Flex to manipulate them better. Try that and see if it works.
Also you may want to try putting a lot of your styles into a CSS sheet as you have a ton of inline styles. Doesn’t hurt anything as far as the site working, but editing along the way is much easier when you can manipulate multiple elements with one style code. Just a suggestion.
Good luck and let me know how that footer goes when you’re done.
Hello,
It didn’t work at all; I then looked at the body and notice a margin of 30px left & right. After put in it back to zero pixels, the original footer (with the container inside it) that I have works fine now!
Thank you anyway because your help make me look deeper into it.
About the styles: I don’t do any coding or styles for that matter, I just use what Bootstrap has. Thus I wouldn’t know what to do about it.
Thank you, again
Use this in CSS:
footer{
height: 100vh;
}
Thank you, but The issue is solved with the help of jo-r a valued member