Problem overlay @media

Asked

Viewed 80 times

2

I’m having a hard time understanding something. I’m putting together a quiz and when the person doesn’t select any alternative one appears box box with 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;
}

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

Problem:

When I use @media to arrange other elements of the page if the resolution is lower, it does not accept the new properties of the .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;
    }
}
jquery html css

  • Have you ever tried to replace @media (max-width:1700px) and (min-width: 1600px) { for @media only screen and (max-width: 1700px) and (min-width: 1600px) {?

  • Already man, I did several tests here and from what I understand the problem is that css is picking up in the main class, and not in the media, I do not know if I was clear.

  • for example, when I edeletei the classes and only left in the media it worked, it seems that it does not find the classes inside the media.

1 answer

2


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

In that case, you have three options:

  1. Clean up the media and make sure they don’t overlap

  2. Use! Important in classes inside the media query (no recommended) ex: top:200px ! Import;

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

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

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.