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
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!!
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.
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.
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.
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.
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
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!!
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.
These solutions seem simple, but take so darn long to solve/figure out! Thanks for sharing 🙏
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 so much i spent hours on this but you explained it really well enough for me to understand and implement it in my website
Thank you Wesley, you've made my day!. Subscribed.
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.
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!
Thank you so much... most efficient solution ever!!
thanks, brother you really helped me.
You are great at this
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!
Thank you, I wish I found this video earlier, great explanation and solves the problem perfectly.
Thank you!!! ❤
Love your videos, very appreciative!
1:30 made so much sense
Thank you! 🙌
Thanks my issue resolved :)
clearly, the best solution of course! Thanks, worked for me!!
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!
Oh god. you have no idea how much time i have spend on this problem... no one answered it that simple
Thank you so much ! Please continue to amaze this world
Thank you.. it helped me..
Thank you very much, easy very easy method... 🇵🇱🖐️🔥
Thank you!
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...!! 🙏🏻🙏🏻🙏🏻
saved my finals omg
What a great and concise video this is! Thank you!
Very helpful, thank you man
thank you for in-depth explanation and clean solution! 😀
thanx for this brother
Thank you very much!
wow, perfect explanation! Thank you very much!
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 🤦♂🤦♂
Thanks, this solution is perfect.
What if we have a footer.jsx file ? How can we make it sticky ?
Tnank you ! This video helped me A LOT !
You dropped this crown👑 King. Thank you.
Thanks for the cool tutorial!
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;
Thank you sir.
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 :(
how to also stick the navbar at the top?
Try position: fixed for navbar
I need to burn this into my memory.
u saved my day, ty!
Thank you very much!
grid-row(auto 1fr auto)
Thankuuuu
Code?
Thank u, thank u so much man
I found it!!! Cheesus!!!
thanks for this helped a lot
Thanks!
Thanks
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.