You saved me thanks.. I'm starting with React and couldn't make and didn't think it was that easy, I did all these mistakes except for calc() and nothing worked, then tried the first one and worked just fine.
bro, the satisfaction I felt when I set margin-top: auto; and that footer stuck to the botton was indescribable. Thank you!! I had solved this issue in another way but when the view port was tiny the footer would take the entire page because the position was fixed.
Normally I don’t comment… but this time I wanna say just „thank you“ for the clean solution and the calm, simple and good explanation of the mechanism behind it. 👍
THANK YOU SO MUCH, I love that u actually explained the fundamentals behind it, the most important aspects were: margin-top: auto and getting the parent element to have flexbox Ty sir!!
This worked perfectly for me! If you're using Tailwind to build a React app: set the parent div to `className="min-h-screen flex flex-col"` and your footer div to `className="mt-auto"`. Does the same thing as doing this in standard CSS.
Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2 Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752
I was trying to keep any html out of my app jsx file but it worked out fine once all of the CSS was situated. I just had to delete the text-align:center, because it shifted everything on the page that I didn't want centered. Thanks for the tutorial!
Thanks for this super video! Unfortunately I'm still struggling with the footer position..my app is wrapped with routes and theme provider and using routes I don't have Footer component in my app.js. I tried to follow your instructions wrapping all the app.js in a div container and giving css rules to the container in app.css and to the Footer in footer.css but didn't work..any suggestions? Thanks in advance!
this solution, is good, i was doing it on my own, and what happend is that i had not imported the css file for the footer component, i changed the css some 110-15 times, did hard refresh, tried to see what was the error my goodness, i couldn't see the eror at all i took days to see tht i forgot to import the css that needs to be added 🤦♂🤦♂
I totally get it now. The video was helpful however it has not worked for me and I am sure it is some sort of css issue but I have no idea how to fix it :(
bro, the satisfaction I felt when I set margin-top: auto; and that footer stuck to the botton was indescribable. Thank you!! I had solved this issue in another way but when the view port was tiny the footer would take the entire page because the position was fixed.
You saved me thanks.. I'm starting with React and couldn't make and didn't think it was that easy, I did all these mistakes except for calc() and nothing worked, then tried the first one and worked just fine.
bro, the satisfaction I felt when I set margin-top: auto; and that footer stuck to the botton was indescribable. Thank you!! I had solved this issue in another way but when the view port was tiny the footer would take the entire page because the position was fixed.
These solutions seem simple, but take so darn long to solve/figure out! Thanks for sharing 🙏
Normally I don’t comment… but this time I wanna say just „thank you“ for the clean solution and the calm, simple and good explanation of the mechanism behind it. 👍
THANK YOU SO MUCH, I love that u actually explained the fundamentals behind it, the most important aspects were:
margin-top: auto
and getting the parent element to have flexbox
Ty sir!!
thank you so much i spent hours on this but you explained it really well enough for me to understand and implement it in my website
This worked perfectly for me! If you're using Tailwind to build a React app: set the parent div to `className="min-h-screen flex flex-col"` and your footer div to `className="mt-auto"`. Does the same thing as doing this in standard CSS.
thank you so much for this
Thank you Wesley, you've made my day!. Subscribed.
Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2
Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752
wow! been looking this solution for months!! got lots of ways but all of them were horrible! Thank u !
Wow the only video that actually made sense and worked. Thank you!
I was trying to keep any html out of my app jsx file but it worked out fine once all of the CSS was situated. I just had to delete the text-align:center, because it shifted everything on the page that I didn't want centered. Thanks for the tutorial!
Thanks for this super video! Unfortunately I'm still struggling with the footer position..my app is wrapped with routes and theme provider and using routes I don't have Footer component in my app.js. I tried to follow your instructions wrapping all the app.js in a div container and giving css rules to the container in app.css and to the Footer in footer.css but didn't work..any suggestions? Thanks in advance!
Thank you so much... most efficient solution ever!!
Thank you, I wish I found this video earlier, great explanation and solves the problem perfectly.
Thank you!!! ❤
Love your videos, very appreciative!
thanks, brother you really helped me.
You are great at this
Thanks my issue resolved :)
Thank you!
clearly, the best solution of course! Thanks, worked for me!!
it's 3:30 Am in India And i was searching for the solution of my problem And i found Your video , Thanks A Lot sir...!! 🙏🏻🙏🏻🙏🏻
this solution, is good, i was doing it on my own, and what happend is that i had not imported the css file for the footer component,
i changed the css some 110-15 times, did hard refresh, tried to see what was the error
my goodness, i couldn't see the eror at all
i took days to see tht i forgot to import the css that needs to be added 🤦♂🤦♂
Very helpful, thank you man
Oh god. you have no idea how much time i have spend on this problem... no one answered it that simple
Thank you! 🙌
Thank you so much ! Please continue to amaze this world
thank you for in-depth explanation and clean solution! 😀
thanx for this brother
Thank you.. it helped me..
Hey my friend, do you know how to make a component stick to the bottom of a page but always be visible when scrolling?
Try:
position: fixed;
bottom: 0;
1:30 made so much sense
Thank you very much!
Thank you sir.
wow, perfect explanation! Thank you very much!
You dropped this crown👑 King. Thank you.
Thanks, this solution is perfect.
What if we have a footer.jsx file ? How can we make it sticky ?
What a great and concise video this is! Thank you!
saved my finals omg
Tnank you ! This video helped me A LOT !
I totally get it now. The video was helpful however it has not worked for me and I am sure it is some sort of css issue but I have no idea how to fix it :(
Thanks for the cool tutorial!
Thank you very much!
Thankuuuu
how to also stick the navbar at the top?
Try position: fixed for navbar
u saved my day, ty!
Thank u, thank u so much man
Code?
grid-row(auto 1fr auto)
I found it!!! Cheesus!!!
thanks for this helped a lot
Thanks!
Thanks
I need to burn this into my memory.
Very efficient solution @ByteGrad
bro, the satisfaction I felt when I set margin-top: auto; and that footer stuck to the botton was indescribable. Thank you!! I had solved this issue in another way but when the view port was tiny the footer would take the entire page because the position was fixed.