Media Queries Unresponsive? - css

Question

Okay guys, I am having a hell of a time trying to get my next classes website to be responsive, least in a way is helpful. My header will not change background images when the viewport is smaller then a desktop(tablet/mobile device). I can get the header's max-height to change, but the background image wont. Any help?
My code is below, but here is a jsfiddle link: https://jsfiddle.net/nb0u8ho7/
#charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
.show-menu{
font-family:Helvetica,Arial, sans-serif;
text-decoration: none;
color:#FFFFFF;
background:#000000;
text-align: center;
padding:10px 0;
position: relative;
top:-20px;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
#media screen and (min-width: 481px) and (max-width: 959px){
header{
max-height:150px;
background-image: url(../images/logoenclosed.jpg)
}
header h3{
postition: relative;
}
Nav{
margin-right: -6em;
}
nav ul li{
position: relative;
top: -138px;
font-size:75%;
margin-bottom: 1em;
}
section{
float: none;
max-width: 80%;
margin-left: 8%;
}
aside {
float: none;
max-width:50px;
}
#dashboard {
display: none;
}
}
#media screen and (max-width : 480px){
aside{
float:none;
width: 760px;
padding-bottom:1%;
}
#dashboard{
display: none;
}
header{
max-height: 150px;
max-width: 480px;
background-size: 100%;
}
header h3{
display: none;
}
header nav{
position: relative;
top:-123px;
left: -286px;
width:100%;
}
header nav ul{
position: static;
display: none;
}
header nav li{
margin-bottom: 0px;
border-top: 1px solid #252122;
}
header nav li a:hover,
header nav li a.hover{
color: #e1e2dd;
background-color:#000000;
border-radius: 0;
}
header nav ul li,
header nav ul li a{
width: 100%;
float: none;
text-align: center;
background-color: #000000;
padding: 0em 0em 0em 3em;
}
.grills{
float: left;
border: solid black 1px;
width: 30px;
margin-bottom: 1em;
height: 30%;
}
.pic_resize{
width: 100%;
max-height: 50%;
}
section{
float: none;
max-width: 80%;
}
.show-menu{
position: relative;
top: 0px;
display: block;
}
#wrapper{
margin: 0;
padding: 0;
width: auto;
}
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: right;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 10px;
}
article p{
padding: 1.5em;
}
article div{
align-content: center;
margin-left: 1.676em;
}
body{
color: #6D6A6C;
background-color: #131313;
font: 100% Verdana;
}
body h1, h2, h3{
color: #FFFFFF;
}
#ctrtitle{
text-align: center;
position: relative;
top: 210px;
}
footer{
clear: both;
background-color: #000000;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
.grills{
float: left;
border: solid black 1px;
width: 22%;
margin-bottom: 1em;
height: 30%;
}
header{
background: #7b7c79;
background:url(../images/header.jpg);
height: 300px;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav{
align-content: center;
padding: 14.6em 0 0 17.9em;
}
nav ul{
text-align: center;
margin: 0em 5em 0 -16em;
list-style: none;
}
nav ul li{
position: relative;
padding: 0 2em 0 0;
float: left;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li.hover a{
background-image: url(../images/nav/nav_1_invert.jpg);
background-size: cover;
transition: background-image .5s ease-out; /*<-- this line will produce a transition */
color: #483838;
}
nav ul li a {
background-image: url(../images/nav/nav_1.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position: center;
font-size:110%;
display: block;
color: #ffffff;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
padding:0.6em 0.9em 0.6em 0.7em;/* the same spacing as before */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
}
nav ul li:hover ul a:hover,
nav ul li.hover ul a:hover,
nav ul li.hover ul a:focus,
nav ul li.hover ul a:active {
background-image: url(../images/nav/place_holder.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
margin-left:-1px;/* pull them in close! */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
color:white;
}
p{
margin-bottom: 1.2em;
}
#pageholder{
background-image: url(../images/nav/place_holder.jpg);
background-size: cover;
background-size: 121px 50px;
pointer-events: none;
cursor: default;
}
.pic_resize{
width: 100%;
max-height: 35%;
}
.rgt{
float: right;
max-width: 45%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.text{
max-width: 80%;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
I am unsure as to what the heck is wrong with my coding, but I would appreciate any help at all.
Thanks,
-Dark_nemesis

Answer 1

Try adding this in <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

After doing some digging, I ended up adding the following lines of code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width:959px)">
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">
and took all of the CSS coding from my previous CSS media queries and make two more, individual .CSS files. This seems to have taken care of the problem, least so far anyway. Thank you all for your help.
P.S. Just in case someone one ends up reading through this trying to figure out a solution to a similar problem, here is some education:
I came to this solution because I read somewhere(I believe it was here on stackoverflow) that the problem may be that before I added the "(min-width:px") and (max-width): portions to my media queries that my normal "desktop" version also had the same widths as the media queries. E.G. My desktop version also had a width of 480px, and 959px. This made my site use my desktop version of CSS for all three queries. I'm not positive is this is the actual reason as to why mine wasn't working, but that made me try the different way, and it seems to work. If I am wrong, please correct me as I am not trying to misinform anyone on anything.
Thanks,
Dark_nemesis