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
Related
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>
Ideally I want to keep the same layout when the browser window shrinks. I don't know if I need media queries to do that. I was trying to use flex-shrink but it wasn't having any effect. I thought flex has a default shrink property? I think part of the problem is I have too many css rules that may be conflicting with one another- I'm trying to get it to look like the wireframe image (below). Here is the codepen.
wireframe-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: 'Cantarell', sans-serif;
font-size: 20px;
}
<!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" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src="images\ic-logo.svg" alt="logo" />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul>
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
You will have to set media queries for your elements to adjust their size at a certain browser width. See the sample ones I added below:
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
Of course, feel free to change the sizing as you desire. See it working in the snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: "Cantarell", sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: "Cantarell", sans-serif;
font-size: 20px;
}
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
<!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" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src='https://svgshare.com/i/esC.svg' title='' />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul class="nav-links">
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
I have tried changing the display and getting rid of some code? probably erased the wrong thing or some code is overlapping? Im new to web development so if you can explain what I did wrong that will be great thanks. Check out Code on this JSFiddle link. https://jsfiddle.net/galbruh/htsrmy0L/2/#&togetherjs=PjjPVg1cOR
.toc-nav {
float: left;
/*list-style: none;*/
margin-top: 2%;
/*margin-left: 10%;
margin-right: 0%;*/
width: 100%;
text-align: center;
}
.toc-nav li {
display: incline;
list-style-type: none;
}
.toc-nav li a {
color: white;
text-decoration: none;
padding: 10px 70px;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.toc-liv li.active a {
border: 1px solid white;
}
.toc-nav li a:hover {
border: 1px solid white;
}
#media screen and (max-width: 500px) {
.toc-nav li a {
float: left;
/*display: none;*/
width: 100%;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="js/classie.js"></script>
<style>
body,html {
height: 100%;
margin: 0;
background-color: #2f3036;
}
b {
color: black;
font-family: "Teodor";
font-size: 25px;
}
.bg {
/* The image used */
background-image: url("images/logo.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
label {
color: white;
}
</style>
</head>
<body>
<header id="top"></header>
<nav role="navigation">
<ul class="toc-nav">
<li>About</li>
<li>Albums</li>
<li>Music</li>
<li>Contact</li>
</ul>
</nav>
<div class="bg"></div>
You have a spelling error in display: incline, it's actually spelled inline. That fixes it.
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.
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>