Media Queries messing up CSS

Asked

Viewed 108 times

1

I’m making a website that has to be responsive first made desktop first I assembled all the css normally, so as soon as I finished I started to assemble the Media queries for a version tablet, I had already had problems with this part, but I opened a topic where they gave me the answer I needed, but now Medias queries of tablet which I have assembled run in those measures, however css I have assembled that does not use Media queries and when I try to make Media queries for desktop version, does not work.

Follows the codes of Media queries tablet version remembering that are the only Media queries that’s in my code:

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/responsivo/tablet.css" media="screen"/>

The code:

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

                               533x853

    *****************************************************************************/
@media (min-width:500px) AND (max-width:533px),(min-height:799) AND (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: 100px;
    }

    .texto1 {
        font-size: 1em;
    }

    .image.ico {
        width: 50%;
        margin-left: 175px;
        margin-top: 100px;
    }

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

Here also goes 4 "prints" from the screen of my site without the Media queries tablet: header-site corpo-site

With the Medias queries tablet: header-site-bagunçado inserir a descrição da imagem aqui

NOTE: This black part of the header has a video.

  • 1

    Friend, a tip is: always start from mobile to desktop, the advantages are "scientifically" proven.

No answers

Browser other questions tagged

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