Media query messing up another media query

Asked

Viewed 497 times

1

Good Morning,

I’m having a problem with some media queries I started doing the media queries on the desktop part with the following measures that worked perfectly:

1024x600 
1024x768 
1280x768 
1440x900
1600x900 
1680x1050 
1920x1080    
1920x1200

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

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

Those media query were working. But when I started making media queries for desktop tablets messed up I don’t know why below are the measurements I used for media queries:

533x853
600x800
600x1024
603x966
768x1024
800x1280

Below is the CSS code I used:

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

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

follow my media queries referring to 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 tablet that’s messing up my media queries 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 responsive-layout
  • 2

    Just one tip: Don’t confuse "design" with "designer".

  • ok! thanks for the tip.

  • Beware that with width of 800px for example you enter both media query

  • It would be easier if you explained what you want to do and what you have inside media query

  • "ah" yes I’ll edit the question right now

2 answers

2


Kirito the problem is easy to see, some screen resolutions end up entering the two media.

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

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

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

  • 1

    Our well-drawn friend hadn’t realized it I’ll test it right now and I’ll get back to you

  • hello friend tested here and didn’t work guess I’m not doing right I will post my desktop and tablet cédigo so you can take a look.

  • I just don’t think you understand how it all works. For example, if you want it on a 533x853 behave in a way you want you have to do like this: @media screen and (max-width: 533px) , screen and (max-height: 853px){ //código para essa largura de ecrã}

  • That is, for screens with a maximum of 533x853. Smaller screens that also enter this code and screens higher than this do not enter.

  • If you use the min-with: 533px you’re saying that every screen with a resolution greater than 533px enter that code.

  • You know what I mean?

  • I think now yes friend if I’m not mistaken I’m really missing and in the tablet css in case I’m checking and thinking about the shape here

  • 1

    I think it’s gonna work now

  • Tell me if it worked later

  • 1

    worked obliged

  • You’re welcome :)

Show 6 more comments

0

If you add a max-width, who knows how to solve your problem...

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

  • "hmm" more I’ll test only that and my max-height where it stands I need it more I’ll test it now.

Browser other questions tagged css responsive-layout

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