Latest solutions
- Submitted about 1 year ago
Expenses chart component in React, TypeScript, Vanilla CSS & Chart.js
#accessibility#bem- HTML
- CSS
- JS
- Submitted about 1 year ago
Newsletter sign-up with success message in React.js and Vanilla CSS
#accessibility#bem- HTML
- CSS
- JS
- Submitted about 1 year ago
Ping single column coming soon page in HTML, CSS and JavaScript
#accessibility#bem- HTML
- CSS
- JS
- Submitted about 1 year ago
FAQ accordion card in HTML, CSS and Vanilla JavaScript
#accessibility#bem- HTML
- CSS
- JS
- Submitted about 1 year ago
Intro component with sign-up form in HTML, CSS and Vanilla JavaScript
#accessibility#bem- HTML
- CSS
- JS
Latest comments
- @rayaattaSubmitted about 1 year ago@harpreet-singh-147Posted about 1 year ago
body{ min-height:100vh; display:flex; flex-direction:column; align-items:center; position: relative; }
footer { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 11px; text-align: center; width: 100%; }
You need to position the footer relative to the body. On the body tag, there is position relative, and on the footer, there is position absolute. Bottom: 20px or whatever value you want will place it where you want it. left: 50%; transform: translateX(-50%); will position the footer in the center of the page. You can use vanilla CSS for anything you want to. Learn how to use vanilla css first, then you can use other tools such as tailwind css and the others.
Marked as helpful0 - @cmcrawford2Submitted about 1 year ago
- @CheosphereSubmitted about 1 year ago