media queries giving conflict

Asked

Viewed 237 times

0

I wonder why that Media queries:

   @media (max-width:533px),(max-height:853px) {
    #menu ul {
        left: 15px;
    }

    #menu ul li a{

        font-size: 1.2em;
        margin: 4px;
    }
    .setas{
        right: 10%;
    }

    #seta-esquerda{
        transform: scale(1);
        right: 85%;

    }

    #seta-direita{
        transform: scale(1);
        left: 40%;
    }

    video {
        transform:scaley(3.9);
    }

    .nomes{
        font-size: 4.3em;
        margin-top: 200px;
    }

    .texto1 {
        font-size: 1em;
    }

    .image.ico {

        margin: 0 0 1em 0;
        width: 50%;
        margin-left: 175px;
        margin-top: 100px;
    }

    .image.ico img {
        width: 60%;
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 80%; 
    }

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }

    .main .jogos-nomes{
        margin-top: 50px;
        font-size: 3.5em;
    }

    .texto-jogos{
        text-align: left;
        font-family: Gabriola;
        font-size: 1em;
        margin-top: 120px;
        margin-left: 40px;
    }



    .main {
        padding: 6em 0 4em 0;
    }



    .main.style2 {
        background-color: #333;
        color:#fff;
        background-size: 100% 100%;
        height: 600px;
        opacity: 0.95;
        border-bottom: 15px solid #f80;
        border-top: 15px solid #f80;

    }

    .main.style2{
        background-repeat: no-repeat;

    }

    .botaozao input[type="button"],.jogos-botao{
        background-color: transparent;
        color: #fff;
        width: 250px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: 20%;
        margin-top: 30px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

}

/*******************************************************************************

                               600x800

********************************************************************************/
@media (min-width:534px) AND (max-width:600px), (max-height:800px){
    #menu ul {
        left: 12%;
    }

    #menu ul li a{

        font-size: 1.2em;
        margin: 4px;
    }
    .setas{
        right: 9%;
    }

    #seta-direita{
        transform: scale(1);
        left: 85%;

    }

    #seta-esquerda{
        transform: scale(1);
        right: 85%;

    }

    .container > p{
        transform: scale(0.9);
    }

    .image.ico {

        margin-left: 35%;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 90%; 
    }

    .texto-jogos{
        margin-top: 20%;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }
} 


/*******************************************************************************

                              600x1024

   *******************************************************************************/
@media (max-width:600px),(min-height:801px) AND (max-height:1024px){
    #menu ul {
        left: 12%;
    }

    #menu ul li a{
        font-size: 1.2em;
        margin: 4px;
    }

    .setas{
        right: 9%;
    }

    #seta-direita{
        transform: scale(1);
        left: 45%;

    }

    #seta-esquerda{
        transform: scale(1);
        right: 50%;
    }

    .botao-circulo{
        margin-top: 100px;
        margin-left:-15px;
    }

    .nomes{
        margin-top: 20%;
    }

    video {
        transform:scaley(4.1);
    }

    .container > p{
        transform: scale(0.9);
    }

    .image.ico {

        margin-left: 36%;
        margin-top: 100px;
        width: 40%;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 93%; 
    }

    .jogos-nomes{
        font-size: 4em !important;
    }

    .texto-jogos{

        margin-top: 30%;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }
}

/*******************************************************************************

                               603x966

  *******************************************************************************/
@media (min-width:601px) AND (max-width:603px){  
    #menu ul {
        left: 12%;
    }

    #menu ul li a{
        font-size: 1.2em;
        margin: 4px;
    }
}

/*******************************************************************************

                               768x1024

  *******************************************************************************/
@media (min-width:604px) AND (max-width:768px){
    #menu ul {
        left: 20%;
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 135%; 
    }

    .jogos-nomes{
        margin-top: 5% !important;
    }

    .texto-jogos{

        margin-top: 15%;
        margin-left: 50px;
    }
}


/*******************************************************************************

                               800x1280

  *******************************************************************************/
@media (min-width:769px) AND (max-width:800px),(min-height:1025px) AND (max-height:1280px){
    #menu ul {
        left: 20%;
    }

    #menu ul li a{
        font-size: 1.2em;
        margin: 4px;
    }

    .setas{
        right: 10%;
    }

    #seta-esquerda{
        transform: scale(0.9);
        right: 85%;

    }

    #seta-direita{
        transform: scale(0.9);
        left: 40%;
    }

    .botao-circulo{
        margin-top: 150px;
        margin-left:-15px;
    }

    video {
        transform:scaley(3.9);
    }

    #bg-video{
        height: 100%;
    }

    .nomes{
        font-size: 4.5em;
        margin-top: 450px;
    }

    .texto1 {
        font-size: 1em;
    }

    .image.ico {
        width: 40%;
        margin-left: 38%;
        margin-top: 100px;
    }

    .image.ico img {
        width: 60%;
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 150%; 
    }

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }


    .jogos-nomes{
        margin-top: 5% !important;
    }

    .texto-jogos{

        margin-top: 15%;
        margin-left: 50px;
    }
}

Is giving conflict with this:

@media screen and (min-width: 1024px) , screen and (min-height: 600px){

    #menu ul {
        left: 26%;
    }
    .nomes{
        margin-top: 200px;
    }

    .botao-circulo{
        margin-top: 50px;
        margin-left:-15px;
    }

    #header {
        height: 100%;
    }

    video {
        transform:scaley(1.8);
    }


    #bg-video{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;

    }

    .image.ico {

        margin-left: 70px;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 175%; 
    }

    .texto-jogos{
        margin-top: 200px;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }



    #footer .copyright {
        left: 38%;
    }
}


@media screen and(min-width:1024px),screen and(min-height: 768px){
    #fundo-transparente-parcerias{
        left: -300px;
        top: 250%;
        transform:scale(0.6);
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 65%;
        transform:scale(0.6);
    }

}


@media screen and (min-width:1280px),screen and(min-height: 800px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 85%;
            transform:scale(0.7);
        }

         #fundo-transparente-parcerias{
            left: -180px;
            top: 265%;
            transform:scale(0.7);
        }*/

}


@media screen and (min-width:1366px),screen and(min-height: 768px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 90%;
            transform:scale(0.7);
        }

         #fundo-transparente-parcerias{
            left: -180px;
            top: 275%;
            transform:scale(0.7);
        }*/

    .setas{
        left: 34%;
    }

}


@media screen and (min-width:1440px),screen and(min-height: 900px){
    #menu ul {
        left: 26%;
    } 
}


@media screen and (min-width:1600px),screen and(min-height: 900px){
    #menu ul {
        left: 32%;
    } 

    .setas{
        position: absolute;
        top: 60px;
        left: 40%;
    }
}


@media screen and (max-width:1680px),screen and(max-height: 1050px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
    }
}


@media screen and (min-width:1920px),screen and(min-height: 1080px){


    #menu ul {
        left: 40%;
    }

    .setas{
        left: 46% !important;
    }

    #seta-esquerda{
       right: 80%;
    }

    #seta-direita{
        left: 20%;
    }


    .nomes{
        font-size: 7em;
        margin-top: 400px;
        margin-left: 200px;
    }

    .texto1{
        margin-left:10%;
    }

    .botao-circulo{
        margin-top: 80px;
        margin-left:55px;
    }



    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
    }

    #bg-video{
        width: 100%;
    }

    video {
        transform:scaleY(1.5);

    }


    .image.ico {
        width: 90%;
        margin-left: 70px;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 190%; 
    }

    .jogos-nomes{
        margin-top: 8% !important;
    }

    .texto-jogos{
        margin-top: 250px;
        margin-left: 90px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .main.style2 {
        height: 800px;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 330%;
        transform:scale(0.6);
    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }



    #footer .copyright {
        left: 38%;
    }
}

@media screen and (min-width:1920px),screen and(min-height: 1200px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
    }

    #bg-video{
        width: 100%;
    }

    .setas{
        left: 18%;
    }
}

I can not understand why these measures are giving conflict and when I start to put more measures they are messy and already able to do the desktop measures and with the lower values as these two example they give conflict between them.

these are my css links:

 <link rel="stylesheet" href="css/responsivo/tablet.css" media="screen"/>
 <link rel="stylesheet" href="css/responsivo/desktop.css" media="screen"/>
media-queries

1 answer

1


The expression max-width, means that the width has to be less than or equal to the specified value. The same goes for height, max-height.

So you’re saying:

Apply the rule for when the screen has a maximum width of 533px or maximum height 835px

@media (max-width:533px),(max-height:853px)  {/*...*/}

And apply the rule for when the screen reaches maximum width of 600px or maximum height of 800px

@media (max-width:600px), (max-height:800px){/*...*/}

So if the screen has width of 500px, which is smaller than 533px and less than 600px or width of 768px which is smaller than 835px and 800px. That is to say it is giving true to both rules, then the LAST will prevail, because that is how it works for CSS, unless you use !important or the selector is more specific.

To avoid this sort of thing, use "isolated rules":

@media (max-width:533px),(min-height: 801px) and (max-height:853px)  {/*...*/}

@media (min-width:534px) AND (max-width:600px), (max-height:800px){/*...*/}

For more details see documentation of Mozilla, which is quite complete, but in English. (I hope it’s not a problem.)

  • "Hmmmm" friend I’m going to test this now because I didn’t know then

  • friend I must follow this same logic for all other measures that are these: 533x853, 600x800, 600x1024, 603x966, 768x1024, 800x1280. , an example of how I am doing: media (max-width:533px),(max-height:853px){...} media (max-width:600px),(min-height:801px) AND (max-height:1024px){...} media (max-width:600px),(min-height:801px) AND (max-height:1024px){...} media (min-width:601px) AND (max-width:768px),(max-height:1024px){...}

  • 1

    Yes @Kirito, one rule should not "enter" into the other, each value block should contain only 1 rule...

  • friend followed the logic in all measures of tablet in case it worked but I had done desktop first right and now it whole mess see the measures I had done in the desktop queries media: 1024x600, 1024x768, 1280x800, 1366x768, 1440x900, 1600x900, 1680x1050, 1920x1050, 1920x1200. Here’s an example of the desktop media queries of how I just did following your explanation and still didn’t fix: @media (min-width: 801px) AND (max-width:1024px) (max-height: 600px){...}

  • 1

    Maybe it’s this max-height that’s messing up, if you just use width it’s not like @Kirito?

  • I’ll test just a moment

  • didn’t work out buddy I’ll do so I will edit my post and put all my tablet code that was made the way you passed me and the desktop as it is there you could see what’s wrong

  • edited friend take a look at her in my code

  • 1

    So @Kirito, it’s for the same reason, note that your minimum height min-height: 600px is within maximum height max-height:853px, that is, there is one rule within the other, so the last of the sequence will prevail.

  • beauty then the desktop part I deleted everything and started a new see the following: @media (min-width: 801px) AND (max-width:1024px) ,(max-height: 600px){...}. This is my first desktop mode media querie I’m using these measures and it still doesn’t work.

  • I’m sorry @Kirito, but I can’t help you, it’s hard without seeing what’s going on, take a look at that documentation, but the problem is that one rule is going inside the other. You have an option to check if you are Landscape or Portrait and (orientation: landscape) see if it helps you. ;)

  • "ok" anyway thanks so much for the help saw arcar as response because it worked in the tablet part I am opening more topics who knows not solve

Show 7 more comments

Browser other questions tagged media-queries

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