Media Queries does not work informed measures

Good afternoon!

I am working the first time with @ media queries, I read a little saw some examples but when carrying out my project I saw that it is not using the settings according to the measure passed. Would anyone know how to tell me what might be going on?

Follow my html Code

    <div class="linha">
  <div class="colunasdesktop colunastablet colunascelular">
    <h2>Acessórios</h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/acessorios-infantis"> Acess&oacute;rios Infantis </a></li>
      <li><a href="/acessorios-bebe"> Acessórios Bebê </a></li>
      <li><a href="/acessorios-para-cabelo"> Acessórios Para Cabelo </a></li>
      <li><a href="/acessorios-de-inverno"> Acessórios de Inverno </a></li>
      <li><a href="/acessorios-para-quarto"> Acessórios Quarto </a></li>
      <li><a href="/alimentacao"> Alimentação </a></li>
      <li><a href="/banheiras"> Banheiras </a></li>
      <li><a href="/bolsas-mochilas"> Bolsas e Mochilas </a></li>
      <li><a href="/carrinhos"> Carrinhos </a></li>
      <li><a href="/copos-canecas-garrafinhas"> Copos, Canecas e Garrafinhas </a></li>
      <li><a href="/cuidados-acessorios"> Cuidados e Acessórios </a></li>
      <li><a href="/estojos"> Estojos </a></li>
      <li><a href="/escolar"> Escolar </a></li>
      <li><a href="/higiene-saude"> Higiene e Saúde </a></li>
      <li><a href="/meias"> Meias Infantis </a></li>
      <li><a href="/pinicos-redutores-sanitarios"> Pinicos e Redutores Sanitário </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2>Ajuda</h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/rastreio"> Acompanhe seu pedido </a></li>
      <li><a href="/como-comprar"> Como Comprar </a></li>
      <li><a href="/descontos"> Cupom de Descontos </a></li>
      <li><a href="/entregas"> Entrega </a></li>
      <li><a href="/guia-de-medidas"> Guia de Medidas </a></li>
      <li><a href="/faq"> Perguntas Frequentes </a></li>
      <li><a href="/trocas-devolucoes"> Trocas e Devoluções </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2><a href="/roupas-para-bebes">Bebês</a></h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/bebe-meninas"> Bebês Meninas </a></li>
      <li><a href="/bebes-meninos"> Bebês meninos </a></li>
      <li><a href="/blusinhas-bebe-meninas"> Blusa de Bebê Meninas </a></li>
      <li><a href="/body-bebe-meninas"> Body de Bebê Meninas </a></li>
      <li><a href="/body-bebe-menino"> Body de Bebê Meninos </a></li>
      <li><a href="/calca-bebe-menino"> Calças e Bermuda de Bebê Meninos </a></li>
      <li><a href="/calca-bebe-menina"> Calças e Shorts de Bebê Meninas </a></li>
      <li><a href="/calcados-bebe-menino"> Calçados de Bebê Meninos </a></li>
      <li><a href="/calcados-bebe-meninas"> Calçados de Bebê Meninas </a></li>
      <li><a href="/calcinhas-bebe"> Calcinhas de Bebê </a></li>
      <li><a href="/camisas-bebe-meninas"> Camisa de Bebê Meninas </a></li>
      <li><a href="/camisas-bebe-menino"> Camisa de Bebê Meninos </a></li>
      <li><a href="/conjunto-bebe-menino"> Conjunto de Bebê Meninos </a></li>
      <li><a href="/convites-boutique-infantil-meninas"> Convite Chá de Bebê </a></li>
      <li><a href="/casaco-bebe-meninas"> Jaquetas e Casacos Bebês Meninas </a></li>
      <li><a href="/jaquetas-e-casacos-para-bebes"> Jaquetas e Casacos Bebês Meninos </a></li>
      <li><a href="/macacao-bebe-meninas"> Macacão Bebê Meninas </a></li>
      <li><a href="/macacao-bebe-menino"> Macacão Bebê Meninos </a></li>
      <li><a href="/pijamas-bebe-menino"> Pijama Bebê Meninos </a></li>
      <li><a href="/pijamas-bebe-meninas"> Pijama Bebê Meninas </a></li>
      <li><a href="/roupinhas-bebe-meninas"> Roupinhas para Bebê Meninas </a></li>
      <li><a href="/roupinhas-bebe-menino"> Roupinhas para Bebê Meninos </a></li>
      <li><a href="/vestido-bebe-meninas"> Vestido de Bebê </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2><a href="/calcados">Calçados</a></h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/botas-infantis"> Botas Infantis </a></li>
      <li><a href="/rasteirinhas"> Rasteirinhas Infantis </a></li>
      <li><a href="/sandalias"> Sandálias Infantis </a></li>
      <li><a href="/sapatilhas"> Sapatilhas Infantis </a></li>
      <li><a href="/tenis-infantil"> Tênis Infantil </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2>Credibilidade</h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="http://abcomm.org/certificado.php?url=boutiqueinfantil.com.br"> ABCOMM </a></li>
      <li><a href="https://www.ebit.com.br/boutiqueinfantil"> Ebit </a></li>
      <li><a href="https://www.reclameaqui.com.br/empresa/boutique-infantil/"> Reclame Aqui </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2>Institucional</h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/sobre-nossa-loja"> A empresa </a></li>
      <li><a href="/central-de-atendimento"> Central de Atendimento </a></li>
      <li><a href="/seguranca"> Compra Segura </a></li>
      <li><a href="/pagamento"> Pagamento </a></li>
      <li><a href="/faq"> Perguntas Frequentes </a></li>
      <li><a href="/privacidade"> Política de Privacidade </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2>Marcas</h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/adoleta"> Adoleta </a></li>
      <li><a href="/artex"> Artex </a></li>
      <li><a href="/atlantica"> Atlântica </a></li>
      <li><a href="/bene-casa"> Bene Casa </a></li>
      <li><a href="/blatt"> Blatt </a></li>
      <li><a href="/brandili"> Brandili </a></li>
      <li><a href="/brincar-e-arte"> Brincar é Arte </a></li>
      <li><a href="/caliga"> Caliga </a></li>
      <li><a href="/caran"> Caran </a></li>
      <li><a href="/cia-da-meia"> Cia da Meia </a></li>
      <li><a href="/costao"> Costão </a></li>
      <li><a href="/cleomara"> Cleomara </a></li>
      <li><a href="/club-b"> Club B </a></li>
      <li><a href="/deinha-fashion"> Deinha Fashion </a></li>
      <li><a href="/fakini"> Fakini </a></li>
      <li><a href="/fbr"> FBR </a></li>
      <li><a href="/ferreirinha"> Ferreirinha Kids </a></li>
      <li><a href="/griffos"> Griffos </a></li>
      <li><a href="/hipertextil"> Hiper Textil </a></li>
      <li><a href="/jidi-kids"> Jidi Kids </a></li>
      <li><a href="/jucatel"> Jucatel </a></li>
      <li><a href="/kappes"> Kappes </a></li>
      <li><a href="/klin"> Klin </a></li>
      <li><a href="/larsen"> Larsen </a></li>
      <li><a href="/lecimar"> Lecimar </a></li>
      <li><a href="/malwee"> Malwee </a></li>
      <li><a href="/marlan"> Marlan </a></li>
      <li><a href="/maro"> Marô </a></li>
      <li><a href="/meu-pedacinho"> Meu Pedacinho </a></li>
      <li><a href="/orango-kids"> Orango Kids </a></li>
      <li><a href="/pimpolho"> Pimpolho </a></li>
      <li><a href="/pirulitando"> Pirulitando </a></li>
      <li><a href="/pitico-baby"> Pitico Baby </a></li>
      <li><a href="/pitiska"> Pitiska </a></li>
      <li><a href="/pollo-sul"> Pollo Sul </a></li>
      <li><a href="/ralakids"> Ralakids </a></li>
      <li><a href="/romitex"> Romitex </a></li>
      <li><a href="/serelepe-kids.html"> Serelepe Kids </a></li>
      <li><a href="/sorrimar"> Sorrimar </a></li>
      <li><a href="/Tecebem"> tecebem </a></li>
      <li><a href="/tileesul"> Tileesul </a></li>
      <li><a href="/trenzinho"> Trenzinho </a></li>
      <li><a href="/winth-kids"> Winth Kids </a></li>
      <li><a href="/world-colors-calcados"> World Colors </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2><a href="/roupas-para-meninas">Meninas</a></h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/women-swimsuits"> Biquinis & Maios </a></li>
      <li><a href="/blusinha-infantil-feminina"> Blusinha Infantil </a></li>
      <li><a href="/calcas-infantil-feminina"> Calça Infantil Feminina </a></li>
      <li><a href="/jeans-infantil-feminino"> Calça Jeans Infantil Feminina </a></li>
      <li><a href="/camiseta-manga-longa-infantil-feminina"> Camiseta Manga Longa Feminina </a></li>
      <li><a href="/conjuntos-menina"> Conjuntos </a></li>
      <li><a href="/panties"> Calcinhas </a></li>
      <li><a href="/camiseta-infantil-feminina"> Camiseta Infantil Feminina </a></li>
      <li><a href="/casacos-e-jaquetas"> Casacos e Jaquetas </a></li>
      <li><a href="/casual-meninas"> Casual </a></li>
      <li><a href="/infantil-menina"> Kids </a></li>
      <li><a href="/boutique-infantil-macaquinhos"> Macaquinhos </a></li>
      <li><a href="/meias"> Meias </a></li>
      <li><a href="/praia-meninas"> Moda Praia </a></li>
      <li><a href="/pijamas"> Pijamas </a></li>
      <li><a href="/polo-infantil-feminina"> Polo Infantil Feminina </a></li>
      <li><a href="/regata-infantil-feminina"> Regata Infantil Feminina </a></li>
      <li><a href="/saias-infantis"> Saias Infantis </a></li>
      <li><a href="/sandalias-meninas"> Sandalias </a></li>
      <li><a href="/sapatilha-meninas"> Sapatilhas </a></li>
      <li><a href="/sapato-feminino-infantil"> Sapato Feminino Infantil </a></li>
      <li><a href="/short-feminino-infantil"> Short Feminino Infantil </a></li>
      <li><a href="/tenis-meninas"> Tenis </a></li>
      <li><a href="/underwear-meninas"> Underwear </a></li>
      <li><a href="/vestidos-e-saias-infantis"> Vestidos e Saias Infantis </a></li>
      <li><a href="/vestidos-infantis"> Vestidos Infantis </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2><a href="/roupas-para-meninos">Meninos</a></h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/bermuda-infantil-masculina"> Bermudas </a></li>
      <li><a href="/bermuda-praia-infantil"> Bermudas de Praia Infantil </a></li>
      <li><a href="/botas"> Botas </a></li>
      <li><a href="/calcados-meninos"> Calçados </a></li>
      <li><a href="/calca-bermuda-meninos"> Calças e Bermudas </a></li>
      <li><a href="/camisa-infantil-masculina"> Camisa Infantil Masculina </a></li>
      <li><a href="/camisas-camisetas-polos-infantis"> Camisas, Camisetas e Polos </a></li>
      <li><a href="/camiseta-infantil-masculina"> Camiseta Infantil Masculina </a></li>
      <li><a href="/manga-longa-infantil-masculina"> Camiseta Manga Longa Masculina </a></li>
      <li><a href="/casaco-jaqueta-infantil-masculina"> Casacos e Jaquetas </a></li>
      <li><a href="/casual-meninos"> Casual Meninos </a></li>
      <li><a href="/chinelos-meninos"> Chinelos </a></li>
      <li><a href="/conjuntos-meninos"> Conjuntos Infantis </a></li>
      <li><a href="/cueca-infantil"> Cuecas </a></li>
      <li><a href="/gorro-touca-infantil-masculina"> Gorros </a></li>
      <li><a href="/jeans-infantil-masculino"> Jeans </a></li>
      <li><a href="/meia-infantil-masculina"> Meias </a></li>
      <li><a href="/moda-praia-meninos"> Moda Praia Infantil Masculina </a></li>
      <li><a href="/moletom-infantil-masculino"> Moletom </a></li>
      <li><a href="/pijamas-infantis-meninos"> Pijamas Infantis </a></li>
      <li><a href="/regata-infantil-masculina"> Regata Infantil Masculina </a></li>
      <li><a href="/tenis-meninos"> Tenis </a></li>
      <li><a href="/cuecas-meias-infantis"> Underwear e Meias </a></li>
      </div>
    </ul>
  </div>
  <div class="colunasdesktop colunastablet colunascelular">
    <h2><a href="/enxoval-de-bebe">Quarto & Enxoval</a></h2>
    <ul class="personalizado">
      <div class="link">
      <li><a href="/acessorios-decoracao"> Acessórios para Decoração </a></li>
      <li><a href="/almofadas"> Almofadas </a></li>
      <li><a href="/enxoval-infantil"> Enxoval Infantil </a></li>
      <li><a href="/objetos-decorativos"> Objetos Decorativos </a></li>
      <li><a href="/roupa-de-cama"> Roupas de Cama </a></li>
      <li><a href="/tapetes-infantis"> Tapetes </a></li>
      </div>
    </ul>
  </div>
</div>

Esse é meu css

    <style>

.link {

list-style: none;
}
.linha {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

  .personalizado {

    position: relative;
    min-height: 1px;
    padding-right: 15%;
    padding-left: 15%;
    margin-left: -15px;
  }

  .coluna {
    border: 1px solid #eee;
    padding: 15px;
  }


@media only screen and (min-width: 992px) {
     .colunasdesktop {
       flex: 0 0 33.33333%;
       max-width: 33.33333%;
     }
   }



 @media only screen and (min-width: 768px) {
    .colunastablet {
    flex: 0 0 50%;
    max-width: 50%;
  }
}


 @media only screen and (min-width: 576px) {
    .colunascelular {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


 @media (min-width: 992px) {
  .linha {
      margin-right: -15px;
      margin-left: -15px;
  }
}


  @media (min-width: 768px) {
  .linha {
      margin-right: -15px;
      margin-left: -15px;
  }
}


  @media (min-width: 576px) {
  .linha {
      margin-right: -15px;
      margin-left: -15px;
  }
}

</style>
Author: hugocsl, 2018-12-18

1 answers

Guy like vc is working with min-width and not with max-width Your @media rules should start from the lowest value to the highest value. But you did the opposite...

This image will help you understand

insert the description of the image here

As vc did the CSS in style mobile-first vc should starts from the smallest screen to the largest. That is, the smallest screen already defaults to CSS that is outside of @media. In this way everything outside of @media is applied only when the screen is smaller than 576px. Then come the styles for canvases with the minimum width of 576px, then canvases with the minimum width of 768px, and the final part of the CSS applies the style for canvases with the minimum width of 992px.

Your CSS should be this way, because the rendering of classes is done from top to bottom, so the rule that is valid is the one that comes last. This is a concept of mobile first. Because it presupposes that the main access will always be by mobile screens so nothing more fair that you start the CSS with the classes for the smallest screens.

@media (min-width: 576px) {
    .linha {
        margin-right: -15px;
        margin-left: -15px;
        background-color: green;
    }
}

@media (min-width: 768px) {
    .linha {
        margin-right: -15px;
        margin-left: -15px;
        background-color: yellow;
    }
}

@media (min-width: 992px) {
    .linha {
        margin-right: -15px;
        margin-left: -15px;
        background-color: red;
    }
}

Notice the average I wanted at the top of this image!

insert the description of the image here


Say

Once a value is defined in a @media vc does not need to repeat it in subsequent @media, because once it is declared it is worth!

Works like this, everything you declare in this rule is valid for screens with at least 567px, for any resolution above that is this rule that is valid, do not need to repeat in 768px and 992px as you did above and used as an example!

@media (min-width: 576px) {
    .linha {
        margin-right: -15px;
        margin-left: -15px;
        background-color: green;
    }
}
 3
Author: hugocsl, 2020-06-11 14:45:34