This is my first webpage ever and I'm very new to this. I've been googling but I can't find a solution to this problem.
I've tried messing around with positioning and or adding containers but I can't get my footer to stay under my page. When resizing, it moves up and collides with all the content on the page
Forgive my code, but it's all over the place with media queries and comments from trying random things out.
Any guidance or pointers are appreciated!
(Also I know this is a "code dump and fix my problem" but my structure is pretty bad and maybe the problem could be elsewhere other than the footer and main content)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*html, body {*/
/* height: 100%;*/
/*}*/
/*.wrapper {*/
/* min-height: 100%;*/
/*}*/
.wrapper {
position:relative;
min-height: 100vh;
}
/*.content-wrap {*/
/* padding-bottom: 348px;*/
/*}*/
/*------------------- background ------------------------*/
.background-container{
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
position: relative;
font-family: 'Titillium Web', sans-serif;
/*padding-bottom: 348px;*/
}
/*------------------- nav ------------------------*/
nav {
display: flex;
padding: 2% 6%;
align-items: center;
justify-content: space-between;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: black;
text-decoration: none;
font-size: 17px;
font-weight: 600;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: black;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.fa-solid {
display: none;
}
/*------------------- main ------------------------*/
main {
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
/*height stuff i found to calc height of main*/
height: calc( 100vh - 161px);
align-items: center;
justify-content: center;
font-family: 'Titillium Web', sans-serif;
}
.title{
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 100px;
padding-top: 100px;
}
.grid-ish {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: .3fr .3fr;
grid-template-areas:
"spotify discord"
"tracker idk";
grid-gap: 3rem;
margin: auto;
width: 50%;
}
.spotify {
grid-area: spotify;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
}
.spotify h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.discord {
grid-area: discord;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 21em;
}
.discord h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.tracker {
grid-area: tracker;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 18em;
}
.tracker h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.idk {
grid-area: idk;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 15em;
}
.idk h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
@media(max-width: 700px){
/*------ display none ------*/
/*------ nav ------*/
nav img {
display: none;
}
.nav-links ul li{
display: block;
}
html, body {
/*still dunno how this solves my overflow*/
/*but oh well*/
overflow-x:hidden;
}
.nav-links{
position: absolute;
background: #e9d138;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
transition: 1s;
z-index: 2;
}
nav .fa-xmark{
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav .fa-bars{
display: block;
color: black;
margin: 38px 20px 0 0;
font-size: 30px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
/*------ main ------*/
main {
height: 100%;
}
}
@media(max-width: 1000px){
/*------ display none ------*/
/*------ main ------*/
main {
height: 100%;
}
}
/*------------------- footer ------------------------*/
.footer-container {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: white;
background-size: 40px 40px;
/*background-color: gray;*/
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
display: flex;
margin-top:auto;
z-index: -11;
/*margin-top: -348px;*/
/*clear: both;*/
}
.footer{
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.footer1{
padding-top: 6rem;
}
.footer2{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.footer2 a{
text-decoration: none;
color: black;
margin-left: 2rem;
transition: .5s;
}
.footer2 a:hover{
transform: translate(0, -5px);
}
.footer3{
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0 0;
}
.footer3 a{
margin: 0 2rem;
text-decoration: none;
color: black;
font-size: 30px;
transition: .5s;
}
.footer3 a:hover{
transform: translate(0, -5px);
}
@media(max-width: 700px){
.footer1{
padding-top: 30px;
}
.footer3{
margin: 2rem 0 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="styles3.css" rel="stylesheet">
</head>
<body>
<!------------------------------- nav ------------------------------->
<div class="wrapper">
<div class= "content-wrap">
<div class="background-container">
<nav>
<a href="index.html"><img src="assets/logo.png"></a>
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="wibut.html">WHAT I'VE BEEN UP TO</a></li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!------------------------------- main content ------------------------------->
<main>
<h1 class="title">Projects</h1>
<div class="grid-ish">
<div class="spotify">
<h2>Spotify Playlist -> Youtube Downloader</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?<br> <br>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Itaque, facere iste, eligendi ipsa rerum
voluptas officia ullam eius iusto eaque.</p>
</div>
<div class="discord">
<h2>Discord Bot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?</p>
</div>
<div class="tracker">
<h2>Financial Tracker</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate
alias ducimus animi, voluptatem quaerat? Aliquam, fuga, distinctio! Modi
veritatis quam quisquam molestias eveniet temporibus incidunt dolorem
quaerat obcaecati tempora possimus, aperiam, qui.</p>
</div>
<div class="idk">
<h2>Haven't Decided</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis
placeat, dolores maxime, assumenda aspernatur repellendus? Officiis
maxime obcaecati nisi maiores. ipsum dolor sit amet, consectetur
adipisicing elit. Eligendi</p>
</div>
</div>
</main>
</div>
<!------------------------------- footer ------------------------------->
<footer>
<div class= "footer-container">
<div class="footer">
<div class="footer1">
<h2>Luca Henderson</h2>
</div>
<div class="footer2">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">What I've Been Up To</a>
</div>
<div class="footer3">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-angellist"></i></a>
</div>
</div>
</div>
</footer>
</div>
<!--<-------------JavaScript for Toggle Menu------------>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>