I followed the steps mentioned here - http://materializecss.com/footer.html - to create a Sticky Footer, but the results are not as expected.
I copy pasted the following code to the materialize.min.css file:
body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; }
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
Materialize provides a container for embedded videos that resize them responsively. To do this, wrap them with the containing div, which adds the class video container. And the third class is a responsive video.
Materialize is an open source project that is completely free to use. We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon.
You're probably not using the <main>
tag
Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags:
<header>
,<main>
,<footer>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With