Media query messing up another media query

Question

Media query messing up another media query

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Good morning,

I have a problem with some media queries I started by doing the media queries on the desktop part with the following measures that worked perfectly:

Here is an example of how I used one of them:

@media screen and (max-width: 1024px) , screen and (max-height: 600px){
...
}

These media query were working. But when I started to do the media queries for tablets the desktops messed up I do not know why below are the measures I used for media queries :

Below is the CSS code I used:

@media only screen and(min-width:603px),(min-height: 966px){
...
}

Just remembering that desktop media queries are in a separate file from the tablet.

Below is my media queries for the desktop:

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

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

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

    #header {
        height: 750px;
    }

    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-height: 768px){
    #fundo-transparente-parcerias{
        left: -300px;
        top: 250%;
        transform:scale(0.6);
    }

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

}

/*notebook 13 polegadas*/
@media screen and (min-width:1280px),(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 (max-width:1366px),(max-height: 768px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 90%;
            transform:scale(0.7);
        }

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

}

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

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

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


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

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

    #bg-video{
       width: 100%;
    }

     .setas{
        left: 18%;
    }
}

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

    #bg-video{
       width: 100%;
    }

     .setas{
        left: 18%;
    }
}

and also my media queries of the tablet that is messing up my media queries from the desktop:

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

    #menu ul li a{

        font-size: 1.2em;
        margin: 4px;
    }

    #seta-esquerda{
        right: 35px;
    }

    #seta-direita{
        left: 35px;
    }

    video {
        transform:scaley(3.4);
    }

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

}

@media screen and(max-width:600px),(max-height: 800px){
    #menu ul {
        left: 10%;
    }

    .image.ico {
        margin-left: 200px;
        margin-top: 100px;
    }

    .container > p{
        text-align: center;
        font-family: Gabriola;
        font-size: 1em;
    }
}


@media screen and(min-width:600px),(min-height: 1024px){
    #menu ul {
        left: 5%;
    }


    #seta-esquerda{
        right: 30px;
    }

    #seta-direita{
        left: 30px;
    }

    .setas{

        left: -1%;
    }

    video {
        transform:scaley(3);
    }

    .image.ico {
        margin: 0 0 1em 0;
        width: 50%;
        margin-left: 200px;
    }

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

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

    #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{
        font-size: 1em;
        margin-top: 120px;
        margin-left: 40px;
    }

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

    }

}


@media screen and(min-width:603px),(min-height: 966px){
    #menu ul {
        left: 5%;
    }


    #seta-esquerda{
        right: 30px;
    }

    #seta-direita{
        left: 30px;
    }

    .setas{

        left: -1%;
    }

    video {
        transform:scaley(3);
    }

    .image.ico {
        margin: 3em 0 1em 0;
        width: 50%;
        margin-left: 200px;
    }

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

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

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

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

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

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

    }
}


@media screen and(min-width:768px),(min-height: 1024px){
    #menu ul {
        left: 15%;
    }

    video {
        transform:scaley(3);
    }

    .image.ico {
        margin: 3em 0 1em 0;
        width: 50%;
        margin-left: 265px;
    }

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

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

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

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

    .texto-jogos{
        font-size: 1.2em;
        margin-top: 120px;
        margin-left: 40px;
    }

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

    }

}

css layout-responsivo

asked by anonymous 16.04.2015 / 16:28

2 answers

0

If you add a max-width , who might solve your problem ...

@media only screen and (min-width : 603px) and (max-width : 1024px) {
     codigo......
}

16.04.2015 / 16:43

Is it possible to implement a "Recycle Bin" method in SAMBA? Update with JOIN in MySQL

score 2 · Accepted Answer

The problem is easy to see, some screen resolutions end up in the two media .

For example, 1680x1050 and 768x1024 both fit the media query :

@media only screen and(min-width:603px),(min-height: 966px){
...
}

Because when you set a min-width:603px you are saying that all screen resolutions with more than 603px must obey the rules within that media and therefore, in the case of resolution screen 1680x1050 enter the two media .