Media Queries not working

Question

Whenever I resize my browser, to see if my Media Queries are working, nothing happens. Here's My code

@media only screen and (max-width: 500px) {
 .navbar-custom {
background-color: #8AC007;
color:#ffffff;
border-radius:0;
min-height:auto;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
padding-left:25px;
padding-right:25px;
padding-top:20px;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active>
a:hover,.navbar-nav > .active > a:focus {
    color: #FFFFF;
    background-color:transparent;
    }

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #FFF;
color:#8AC007;
}

    .navbar-custom .navbar-brand {
   color:#FFFFF;
   padding:20px;
}

.navbar-custom .navbar-toggle,
.navbar-custom .nav .open>a, .navbar-custom .nav .open>a:hover, 
.navbar-custom .nav .open>a:focus {
background-color:transparent;
color:#FFF;
}

.navbar-custom .icon-bar {
border: 1px solid #fff;                
}

/*-- change navbar dropdown color --*/
.navbar-custom .navbar-nav .open .dropdown-menu>li>a,.navbar-custom     .navbar-nav .open .dropdown-menu {
color:#8AC007;
}
.carousel{
position:asbolute;
top:-20px;
margin-bottom:60px;
height:100%;
}
.carousel .item {
  height: 320px;
}

.item img {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
}
a:hover{
text-decoration:none;
}
.first-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(https://www.apple.com/osx/elcapitan-preview/static/osx-preview/overview/hero/image_large.jpg);
background-size:100% 100%;
}
.second-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(http://images.nationalgeographic.com/wpf/media-live/photos/000/187/cache/canyons-utah_18730_990x742.jpg);
background-size:100% 100%;
}
.third-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(Website%20Pics/mountain.jpg);
background-size:100% 100%;
}
.fourth-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(TheRoad.jpg);
background-size:100% 100%;
}
.join{
color:#FFFFF;
text-decoration:none;
}
#join:hover{
color:#FFFF;
text-decoration:none;
}

#Drew{
position:absolute;
left:0%;
top:100%;
height:100%;
width:100%;
}
#DrewDescription{
position:absolute;
left:0%;
top:100%;
font-size:150%;
text-align:center;
z-index:10000;
color:rgba(57,196,232,1.00);
}
#Ben{
position:absolute;
left:0%;
top:200%;
height:100%;
width:100%;
}
#BenDescription{
position:absolute;
left:0%;
top:200%;
font-size:150%;
text-align:center;
z-index:10000;
color:rgba(57,196,232,1.00);
}
#David{
position:absolute;
left:0%;
top:300%;
height:100%;
width:100%;
}
#DavidDescription{
position:absolute;
left:0%;
top:300%;
font-size:150%;
text-align:center;
z-index:10000;
color:rgba(57,196,232,1.00);
}
#Tay{
position:absolute;
right:0%;
top:400%;
height:100%;
width:100%;
}
#TayDescription{
position:absolute;
left:0%;
text-align:center;
top:400%;
font-size:150%;
z-index:10000;
color:rgba(57,196,232,1.00);
}
}
}

and the css i have for width greater than 500px

@media only screen and (max-width: 500px) {
.navbar-custom {
background-color: #8AC007;
color:#ffffff;
border-radius:0;
min-height:auto;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
padding-left:25px;
padding-right:25px;
padding-top:20px;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active >
a:hover, .navbar-nav > .active > a:focus {
color: #FFFFF;
background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #FFF;
color:#8AC007;
}
.navbar-custom .navbar-brand {
color:#FFFFF;
padding:20px;
}

.navbar-custom .navbar-toggle,
.navbar-custom .nav .open>a, .navbar-custom .nav .open>a:hover,
.navbar-custom .nav .open>a:focus {
background-color:transparent;
color:#FFF;
}

.navbar-custom .icon-bar {
border: 1px solid #fff;                
}

/*-- change navbar dropdown color --*/
.navbar-custom .navbar-nav .open .dropdown-menu>li>a,.navbar-custom
.navbar-nav .open .dropdown-menu {
color:#8AC007;
}
.carousel{
position:asbolute;
top:-20px;
margin-bottom:60px;
height:100%;
}
.carousel .item {
height: 600px;
}

.item img {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
}
a:hover{
text-decoration:none;
}
.first-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(https://www.apple.com/osx/elcapitan-
preview/static/osx-preview/overview/hero/image_large.jpg);
background-size:100% 100%;
}
.second-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(http://images.nationalgeographic.com/wpf/media-
live/photos/000/187/cache/canyons-utah_18730_990x742.jpg);
background-size:100% 100%;
}
.third-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(Website%20Pics/mountain.jpg);
background-size:100% 100%;
}
.fourth-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(TheRoad.jpg);
background-size:100% 100%;
}
.join{
color:#FFFFF;
text-decoration:none;
}
#join:hover{
color:#FFFF;
text-decoration:none;
}
.team{
    padding:2%;
}
#Drew{
position:absolute;
left:5%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#DrewDescription{
position:absolute;
left:5%;
right:75%;
top:725px;
font-size:150%;
text-align:center;
}
#Ben{
position:absolute;
left:28%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#BenDescription{
position:absolute;
left:28%;
right:52%;
top:725px;
font-size:150%;
text-align:center;
}
#David{
position:absolute;
left:52%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#DavidDescription{
position:absolute;
left:52%;
right:28%;
top:725px;
font-size:150%;
text-align:center;
}
#Tay{
position:absolute;
right:5%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#TayDescription{
position:absolute;
right:5%;
left:75%;
text-align:center;
top:725px;
font-size:150%;
}
}
}

Answer 1

Make sure you are using the viewport tag in your page header:

<head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head>

And also, you'll need to change one of your media queries to read (min-width:500px). It's worth considering a change to em (500 px = 31.25em) measurements as well, as explained in this blog post by Lyza Gardner. It helps keep the design looking good in the case of a user zooming in or out manually in their browser.