Медиа-запросы не работают

Question

Всякий раз, когда я изменяю размер моего браузера, чтобы увидеть, работают ли мои медиа-запросы, ничего не происходит. Вот мой код

@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); 
} 
} 
} 

и CSS у меня есть для шириной более 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

Убедитесь, что вы используете видовых тег в вашей страницы заголовка:

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

Кроме того, вам нужно будет изменить один из ваших медиа-запросов на чтение (min-width:500px). Стоит также рассмотреть вопрос об изменении на em (500 px = 31.25em), как описано в this blog post Лизой Гарднер. Это помогает сохранить дизайн в хорошем состоянии в случае, когда пользователь увеличивает или уменьшает масштаб вручную в своем браузере.