Trying to Apply A Sticky Footer with Mobile First Approach - html

I am trying to apply a sticky footer but at the 769px media query it is breaking (won't stay at the bottom of the page). I am using Mobile-First Approach, I am not using Boostrap framework.
Do I need to apply other media queries before the footer will stick? I am trying to add the footer to the bottom of my page.
Am I missing something my CSS media query for 769px or am I missing something in my .main-footer in my CSS Layout Container section under my Base Layout Styles.
I have included my code. Thank you for help!
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px)
}
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>


Move min-height of .wrap class out of media query.
You need the minimum width both, when viewing the page on small and large screens.
Like that:
...
.wrap {
min-height: calc(100vh - 89px)
}
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;
}
...
Note that vh works only in very modern browsers (IE >= 11, Firefox >= 50) See this link for compatibility details: http://caniuse.com/#feat=viewport-units.
There are other ways to make an element stick to the bottom, without using calc and vh. This article describes several ways to do that: https://css-tricks.com/couple-takes-sticky-footer/
One of them (called "Negative margin on footer" in the article above) is to add a negative margin to the footer (equal to the height of the footer) and bottom padding to the element that wraps content above the footer (again equal to the height of the footer):
Quote from https://css-tricks.com/couple-takes-sticky-footer/: There is negative top margins on footers
This technique did not require a push element, but instead, required
an extra wrapping element around the content (the wrapping element that held everything except the footer) in which to apply
matching bottom padding to. Again to prevent negative margin from
lifting the footer above any content.
What needs to be changed in your CSS to use this technique:
...
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
...
Here is the whole code (HTML is same as yours):
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>

Related

Making my "title" text show up on the navbar

I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.

You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>

navigation bar isn't responsive

This is my HTML and CSS code I want to make the navigation bar responsive but the media query doesn't cooperate It doesn't make any difference. and #menu doesn't make any difference in the first place(display: none doesn't work) it also doesn't work under media query. I can't figure out why, please help me.
.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}
header .icons a:hover {
color: black;
}
#menu {
display: none;
}
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: black;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: white;
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>jj </title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header" >
<a href="#" class="logo">
<img src="images/logo.jpg" alt=""></a>
<nav class="navbar">
home
varieties
about us
contact us
</nav>
<div class="icons">
</div>

Add a head element with a meta tag at the beginning of your code so the website is properly rendered based on actual lower screen sizes (without this, websites tend to render in higher resolution sizes than the device actually is).
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I also cannot find where your header class is used in your html code so I got rid of most of the .header portions in your media queries to have the styling take effect.
#media(max-width:991px){
html{
font-size: 55%;
}
.header{
padding: 1.5rem 2rem;
}
}
#media(max-width:768px){
#menu {
display: inline-block;
}
.navbar{
position: absolute;
top:100px; right: 0;
background-color:#333;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.navbar a{
color:rgb(243, 215, 215);
display: block;
margin:1.5rem;
padding:.5rem;
font-size:2rem;
}
}

Basicly just exchange your nav with this template and it should work perfectly.
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
.topnav {
display: inline-block;
}
}
.topnav {
background-color: gray;
overflow: hidden;
margin: 1px;
border-radius: 10px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
background-color: light-gray;
color: red;
transition: 1s;
}
.topnav a.active {
background-color: red;
color: white;
border-radius: 10px;
}
<div class="topnav">
home
varieties
about us
contact us
</div>

Can't get the hover to work on navigation anchors

Can't get the hover on menu links to work. I'm using Xampp for local remote testing.
.menu ul>li a:hover{
color: blue;
font-size: 3rem;
}
I've tried different selectors, etc... nothing seems to work
here is the code:
* {
box-sizing: border-box;
}
html,
body {
color: #222;
font-size: 16px;
line-height: 1.4;
height: 100%;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
background-image: url("../images/header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.about {
background-image: url("../images/bellow_header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* here starts the styles for the NAvigation bar */
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important;
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: 'Pacifico', cursive;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0.5rem 1.5rem;
}
.active a {
color: #CC5200!important;
font-size: 1.7rem;
font-weight: 700;
}
.menu a {
font-size: 1.5rem;
font-weight: 500;
padding: 0.3rem;
text-decoration: none;
color: black;
}
/*by default on mobile the navigation isn't visible*/
.menu li {
display: none;
color: black;
}
.menu .icon {
order: 99;
display: block;
}
.menu.menuOpen {
position: fixed;
width: 80%;
left: 10%;
flex-direction: column;
background-color: #161415;
border-radius: 1rem;
margin: 0.5rem auto;
}
/*moving the icon to the top-right corner*/
.menu.menuOpen .icon {
position: absolute;
right: 0;
top: 0;
}
.menu.menuOpen li {
display: block;
text-align: center;
color: white;
}
/*tablets */
#media only screen and (min-width: 481px) {
/* Styles */
/*hidding the icon*/
.menu .icon {
display: none!important;
}
.menu li {
display: inline-block;
margin-left: 0.5rem;
}
.menu ul>li a:hover {
color: blue;
font-size: 3rem;
}
#logo {
margin-left: 2rem;
margin-top: 1rem;
display: inline-block;
text-align: left;
}
}
/*Landscape making the background look good */
#media screen and (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
/* Landscape styles */
header {
height: 120%;
}
}
/*laptops */
#media only screen and (min-width: 769px) {
/* Styles */
#logo {
display: inline-block;
position: relative;
top: 3rem;
left: 4rem;
}
}
/*large screens */
#media only screen and (min-width: 1025px) {
/* Styles */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StyleTravel-Home</title>
<!-- Javascript -->
<script type="text/javascript" src="scripts/app.js"></script>
<meta name="description" content="StyleTravel is one of the most used services for booking HighEnd Sejours">
<meta name="keywords" content="Sejours,StyleTravel,HighEnd,Expensive,Exotic">
<meta name="author" content="Bogdan Mihalca">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- normalize -->
<link rel="stylesheet" href="css/normalize.css">
<!--layout styles -->
<link rel="stylesheet" href="css/layout.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<header>
StyleTravel
<nav class="menu" id="myMenu">
<ul>
<li class="active">Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li><i class="fa fa-search"></i>Search</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myResponsiveHamburger()">
<i id="hamb-icon" class="fa fa-bars"></i></a>
</li>
</ul>
</nav>
</header>
<div class="about"></div>
</body>
</html>

#logo {
font-size: 2.5rem;
text-decoration: none;
/* display: block !important; */
}
Your hover is absolutely fine but one mistake! display: block !important; this is what you put on and it is stretching and took all the visible width. So when you hovers over the links it's actually not hover over them! If you remove or unset the style it will work!
Though your hover is not looking great but it will hover if you remove the code! Here is my demo
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important; /* Remove this ans code will work!*/
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: "Pacifico", cursive;
outline: 1px solid red; /* for demonestration */
background: #3333; /* for demonestration */
}
Just Remove the commented styles and it will be fine.

Media query is not changing the logo size

I am trying to change the logo size with the help of below media query but it doesn't work. display: none works but the height and width property doesn't for the below media query.
So whats the problem with the below code.
/* SMALL PHONES TO SMALL TABLETS 481 TO 767px */
#media only screen and (max-width: 767px) {
.logo {
height: 20px;
}
}
/* SMALL PHONES FROM 0 TO 480px */
#media only screen and (max-width: 480px) {
}
css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-size: 20px;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
background-color: #fff;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 80%;
margin: 0 auto;
}
/************** HEADER ***************/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.83), rgba(10, 189, 227, 0.21)), url(img/header-background.jpg);
height: 200px;
background-position: center;
background-size: cover;
}
.logo {
height: 100px;
width: auto;
float: left;
margin: 10px 0 0 20px;
}
.main-nav,
.main-nav-right {
margin-left: 22px;
}
.main-nav {
float: left;
list-style: none;
margin-top: 15px;
}
.main-nav li {
display: inline-block;
margin-right: 22px;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav li a {
text-decoration: none;
text-transform: uppercase;
color: #cbc8c8;
word-spacing: 2px;
font-size: 80%;
font-weight: 400;
}
.main-nav-right {
float: right;
list-style: none;
margin-top: 15px;
margin-right: 22px;
}
.main-nav-right li {
display: inline-block;
margin-right: 22px;
}
.main-nav-right li a {
text-decoration: none;
text-transform: uppercase;
color: #cbc8c8;
word-spacing: 2px;
font-size: 78%;
font-weight: 400;
}
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/other-css/grid.css">
<link rel="stylesheet" type="text/css" href="css/other-css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="row">
<header>
<nav>
<img src="https://www.freelogodesign.org/img/logo-ex-7.png" class="logo" alt="logo">
<ul class="main-nav">
<li>Home</li>
<li>Add A Post</li>
</ul>
<ul class="main-nav-right">
<li>Login</li>
<li>Register</li>
</ul>
</nav>
</header>
</div> <!-- main row div -->
</body>
</html>

you forgot this meta:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is explain about this meta:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Responsive Centering HTML5

Okay, here it goes:
I am creating my first website. Immediately come across a problem which seems difficult to overcome.
I want to center my image between the header and footer which will stay centered vertically and horizontally, regardless of screen size.
I've seen examples using flexbox where you can center text and whatnot in the middle of the target area. Seems like its useful. I tried it but maybe i haven't applied it correctly.
My code so far
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
}
body {
color: grey;
font-family: 'Alegreya', sans-serif;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.banner {
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.banner-inner {
max-width: 60%;
margin: 0 auto;
}
header {
width: 100%;
height: 80px;
display: block;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
/*--- START NAVIGATION --*/
nav {
float: right;
/* Top, Right, Bottom, Left */
padding: 25px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
font-weight: bold;
}
nav ul li a {
color: grey;
text-decoration: none;
font-weight: bolder;
}
nav ul li a:hover {
color: lightgrey;
}
.current {
color: black;
}
/* --- MUSIC PAGE --*/
.music-wrapper {
width: 100%;
text-align: center;
}
.album-list figure {
display: inline-block;
margin: 10%;
}
.album-list figcaption {
text-align: center;
font-size: 150%;
font-family: 'Alegreya Sans', sans-serif;
font-weight: bold;
margin: 2%;
}
.album-list a {
text-decoration: none;
}
/* --- SOCIAL AND FOOTER --*/
footer {
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 200%;
margin: 0.5%;
padding: 0.5% 4% 0.5% 4%;
color: grey;
}
.social i:hover {
color: lightgrey;
}
footer.second {
max-height: 100px;
position: fixed;
bottom: 0px;
z-index: 10;
background: white;
border-top: 1px solid grey;
}
footer.second p {
padding-bottom: 5px;
text-align: center;
color: grey;
font-weight: bold;
}
/*---- MEDIA QUERIES---- */
#media screen and (max-width: 760px) {
header {
position: absolute;
}
#logo {
margin: 15px 0 20px -25px;
background: url(img/SA_mobile.png) no-repeat center;
}
.banner {
padding-top: 150px;
}
#menu-icon {
display: inline-block;
color: #000000;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
right: 20px;
top: 60px;
border: 2px solid #000000;
border-radius: 5px 0 5px 5px;
width: 50%;
}
nav:hover ul {
display: block;
background: #FFF;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.social i {
font-size: 150%;
padding: 2% 4% 2% 4%;
}
/*--- MUSIC PAGE --*/
.music-wrapper {
padding-top: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Content fits mobile screens-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<title>SPAZ Attack</title>
</head>
<body>
<header>
<div class="header-inner">
<nav>
<!--- Icon For Moblie Version -->
<ul>
<li>Home</li>
<!--- Albums/Videos/Audio -->
<li>Music</li>
<!--- Calander gig dates/book us -->
<li>Gigs</li>
<!--- About the band -->
<li>Bio</li>
<!--- Merchandise -->
<li>Merch</li>
<!--- Contact Info -->
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!--- END HEADER -->
<section class="banner">
<div class="banner-inner">
<img src="img/spazAttackLogoSmaller1.png">
</div>
</section>
<!-- END BANNER -->
<!--- END FOOTER -->
<footer class="second">
<div>
<ul class="social">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-bandcamp"></i></li>
<!-- Don't Have YET
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
-->
</ul>
</div>
<p>© SPAZ Attack</p>
</footer>
<!--- END SOCKET -->
</body>
</html>

Checkout this fiddle: https://jsfiddle.net/8cyjc9qw/
.mid {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
I have used some other examples to demonstrate how it would look. I have used vh for header and footer and assign the remaining height to main content section and use flexbox to center the image. Hope this helps.