Responsive Layout

2

I'm having problems in the responsive layout part, I'm looking forward to starting work with the following sizes:

1280 x 1024
1024 x 768
768 x 1024
480 x 320
1680 x 1050 
1024 x 600 

However, I had already opened another topic for that . Only a different problem happened. I was able to make my media queries with the following sizes:

1024x768, 768x1024 e 1024x600

Follow one of my half queries:

@media (max-width: 1024px) and (max-height: 768px){
    #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;
        /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
    }

    .image.ico {

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

    #fundo-transparente-icones{
        left: -300px;
        top: 70%;
        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: 257%;
        transform:scale(0.6);
    }

    #teamspeak-img{
        transform:scale(0.7);
        /*-webkit-filter:grayscale(100%);*/
        z-index: 2000 !important;
    }



    .team.style-team{
        background-repeat: no-repeat;

    }

    .botoes-team input[type="button"],.btn-sobre-team{
        background-color: transparent;
        color: #fff;
        width: 100px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: -9%;
        margin-top: 10px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;
        cursor: pointer;
    }
    .botoes-team input[type="button"]:hover,.btn-sobre-team{
        background-color: #fff !important;
        color: #333 !important;
        transition:0.5s !important;
        cursor: pointer !important;


    }

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



    #footer .copyright {
        left: 38%;
    }

}

This is just like the other two I mentioned, they work, remembering that each one is in a separate .CSS file (I tried to leave it in a single file, but the code did not work and only worked like that.)

But when I try to do, for example, the average query of 1680x1050 , it works normally. But my other queries that I had already done stopped working. I can not understand, does anyone know what this is?

Here is my average query for this size:

@media (max-width: 1680px) and (max-height: 1050px){
    #menu ul {
        left: 28%;
    }

    .nomes{
        margin-top: 200px;
    }

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

    #header {
        height: 925px;
    }

    video {
        transform:scaley(1.8);
    }


    #bg-video{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;
        /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
    }


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

                               Icones

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

    .image.ico {

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

    #fundo-transparente-icones{
        left: -200px;
        top: 75%;
        transform:scale(0.7);
    }

    .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: 13%;
        margin-top: 30px;   

    }

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


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

                               Parcerias

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

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

                                   Team Speak

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

    #teamspeak-img{
        transform:scale(0.7);
        /*-webkit-filter:grayscale(100%);*/
        z-index: 2000 !important;
    }



    .team.style-team{
        background-repeat: no-repeat;

    }

    .botoes-team input[type="button"],.btn-sobre-team{
        background-color: transparent;
        color: #fff;
        width: 100px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: -9%;
        margin-top: 10px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;
        cursor: pointer;
    }
    .botoes-team input[type="button"]:hover,.btn-sobre-team{
        background-color: #fff !important;
        color: #333 !important;
        transition:0.5s !important;
        cursor: pointer !important;


    }

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



    #footer .copyright {
        left: 40%;
    }

}
    
asked by anonymous 15.04.2015 / 18:48

1 answer

3

If you apply

@media (max-width: 1680px) and (max-height: 1050px){

You get everyone from 0 to 1680px width and also everyone from 0 to 1050px height. That is, you may be overwriting the code written for the other resolutions depending on the order you are positioning this snippet in your code.

That is, you have two possible solutions:

  • Rearrange your code
  • Apply additional clauses that define a minimum size
22.04.2015 / 20:23