I'm working on a little something and I'm trying to make it so the footer is always getting pushed down when the screen shrinks. I'm struggling to do this as my content instead goes under the footer. Can anyone help?
I'm also open to any things I can improve on or clean up, I know the CSS is a bit un-neat but I'm getting used to not using bootstrap so I'm working on it :)
Many thanks, Conner.
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
min-height: 100%;
}
#image-wrap {
background-color: #2E2E2E;
}
#wrapper-image {
height: calc(100vh - 135px);
background: url(../images/background-image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
}
.full-view {
width: 100%;
}
/* Fonts */
.title-color {
color: #FF1A1A;
}
@font-face {
font-family: titleText;
src: url("../fonts/Typo_Round_Regular_Demo.otf") format("opentype");
}
.page-font {
font-family: titleText;
}
/* Header Handler */
#header-container {
position: absolute;
top: 0;
background-color: #2E2E2E;
}
#site-title {
display: inline-block;
margin-left: 175px;
margin-top: 25px;
margin-bottom: 20px;
font-size: 20px;
}
#navbar-handle {
float: right;
display: inline-block;
margin-right: 90px;
margin-top: 25px;
}
.navi-bar {
display: inline-block;
list-style: none;
}
.navi-bar li {
display: inline-block;
text-decoration: none;
}
li a {
text-decoration: none;
color: white;
padding: 20px;
font-size: 25px;
}
.nav-item {
background-color: #4A4A4A;
border-radius: 5px;
margin-top: 10px;
margin-left: 15px;
padding: 5px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
text-align: center;
}
#footer {
background-color: #2e2e2e;
position: relative;
bottom: 0;
height: auto;
clear: both;
}
#footer-title {
margin-left: 10px;
}
#footer-text {
text-align: center;
}
#footer-subtext {
color: white;
}
#discord-icon {
font-size: 60px;
padding: 10px;
}
#discord-item-container {
margin-top: 5px;
border: solid 1px red;
border-radius: 5px;
display: inline-block;
width: auto;
background-color: #494949;
text-align: center;
padding: 5px;
}
#builder,
#builder a {
color: white;
text-align: left;
text-decoration: none
}
/* Content */
#content {
position: absolute;
top: 275px;
width: 100%;
height: auto;
}
.grid-container-1 {
display: grid;
grid-template-columns: auto;
text-align: center;
height: auto;
}
#image-container {
height: auto;
margin: 0 auto;
position: relative;
}
#logo {
height: 125px;
width: 125px;
}
#content-subtext {
color: white;
}
@media screen and (max-width: 420px) {
.grid-container {
grid-template-columns: auto;
}
#discord-item-container {
margin-top: 10px;
margin-bottom: 5px;
}
#site-title {
display: block;
margin-top: 10px;
text-align: center;
margin-left: 0;
font-size: 20px;
}
#navbar-handle {
display: block;
text-align: center;
margin-left: 0;
margin-right: 0;
float: none;
padding-bottom: 5px;
}
li a {
padding: 5px;
font-size: 20px;
}
}
@media screen and (max-width: 770px) and (min-width: 421px) {
#site-title {
margin-left: 60px;
}
li a {
padding: 5px;
font-size: 25px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover, user-scalable=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/page-style.css">
<!-- Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div id="image-wrap">
<div id="wrapper-image">
</div>
</div>
<div class="full-view" id="header-container">
<div class="title-color page-font" id="site-title">
<h1>Voltunix's Services</h1>
</div>
<div id="navbar-handle">
<ul class="navi-bar page-font">
<li class="nav-item">
<a href="index.html">Home</a>
</li>
<li class="nav-item">
<a href="services.html">Services</a>
</li>
</ul>
</div>
</div>
<div id="content">
<div class="grid-container-1">
<div class="grid-row" id="image-container">
<img src="./images/logo.png">
<h1 class="page-font title-color">Voltunix's Services</h1>
<p class="page-font" id="content-subtext">Quality work fitting your personal budget</p>
</div>
</div>
</div>
</div>
<footer class="full-view" id="footer">
<div id="footer-title">
<div class="grid-container">
<div class="grid-item" id="footer-text">
<h2 class="title-color page-font">Voltunix</h2>
<p class="page-font" id="footer-subtext">Freelance Manager,<br> Server Owner,<br> Middleman
</p>
</div>
<div class="grid-item">
<div id="discord-item-container">
<i class="fab fa-discord title-color" id="discord-icon"></i>
<p class="page-font" style="color: white;">Voltunix#0033</p>
</div>
</div>
<div class="grid-item" style="border: solid 1px red;">
<p id="builder">Website developed by <a href="http://www.connermurphy.net" target="_blank">Conner Murphy</a></p>
</div>
</div>
</div>
</footer>
</body>
</html>
