Estou com dificuldades de entender uma coisa. Eu estou montando um questionário e quando a pessoa não seleciona nenhuma alternativa aparece uma box com overlay dizendo que é para ela selecionar.
Código CSS:
.backdrop{
position:absolute;
top:0px;
left:0px;
width:100%;
height:1020px;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}
.box{
position:fixed;
top:200px;
left:700px;
width:470px;
height:250px;
background:#3093C7;
display:block;
z-index:51;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0px 0px 5px #444444;
display:none;
}
.close{
float:right;
margin-right:6px;
cursor:pointer;
}
Código jQuery:
function overK(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
}
$('.backdrop').click(function(){
close_box();
});
$('.close').click(function(){
close_box();
});
function close_box(){
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
Problema:
Quando eu utilizo @media
para arrumar outros elementos da página caso a resolução seja menor, ele não aceita as novas propiedades da .box
e .backdrop
.
Por que isso acontece?
@media (max-width:1700px) and (min-width: 1600px) {
.box{
position:fixed;
top:200px;
left:100px;
width:470px;
height:250px;
background:#3F0;
display:block;
z-index:51;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0px 0px 5px #444444;
display:none;
}
.divbuttons{
display:inline;
margin: 0 auto;
width:100%;
position:relative;
left:510px;
}
.containerText{
background-color:#090;
width:95%;
margin: 0 auto;
}
}
@media (max-width:1700px) and (min-width: 1600px) {
por@media only screen and (max-width: 1700px) and (min-width: 1600px) {
?