Overlay problem @media

Question

Overlay problem @media

Navigation

#1 by (2 votes)

2

I'm having trouble understanding one thing. I am putting together a questionnaire and when the person does not select any alternatives an box appears with the overlay saying that it is for her to select.

CSS Code:

.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;
}

jQuery code:

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

Problem:

When I use @media to store other elements of the page if the resolution is smaller, it does not accept the new properties of .box and .backdrop .

Why does this happen?

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

html jquery css

asked by anonymous 13.06.2014 / 20:10

1 answer

DropzoneJS - View files - How to do? I can not execute a procedure in Firebird

score 2 · Accepted Answer

Without seeing the other @media queries present on the page is difficult, but in fact, one media query will replace the other if they intersect. Or if for example you have the same class declared outside of the media queries.

In this case, you have three options:

Arrange the media queries and ensure they do not overlap

Use! important in classes that are within the media query (not recommended) ex: top: 200px! important;

If this is the only media query on the page and you want that it replaces codeable declarations of the code, make this class more specific. Ex: General class: .box {} Class in the media query: body .box {} or .parentDiv .box {}

The third option is the most indicated, the more specific class will be considered.