2

Boa tarde!

Estou trabalhando a primeira vez com @media queries, li um pouco vi uns exemplos porem ao realizar meu projeto vi que ele não esta utilizando as configurações de acordo com a medida passada. Alguém saberia me dizer o que pode estar acontecendo?

Segue meu codigo html

    <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>

1 Resposta 1

3

Cara como vc está trabalhando com min-width e não com max-width suas regras @media devem começar do valor mais baixo para o valor mais alto. Mas vc fez o contrário...

Essa imagem vai te ajudar a entender

inserir a descrição da imagem aqui

Como vc fez o CSS no estilo mobile-first vc deve começa da menor tela para a maior. Ou seja, a menor tela já tem como padrão o CSS que está fora das @media. Dessa forma tudo que está fora dos @media é aplicado apenas quando a tela é menor que 576px. Depois vêm os estilos para telas com a largura mínima de 576px, depois telas com largura mínima de 768px, e a parte final do CSS aplica o estilo para telas com largura mínima de 992px.

Seu CSS deveria estar dessa forma, pois a renderização das classes é feita de cima para baixo, assim a regra que fica valendo é a que vem por último. Isso é um conceito do mobile first. Pois ele pressupõem que o acesso principal sempre será por telas mobile então nada mais justo que começas o CSS com as classes para as menores telas.

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

Repare no média queri no topo dessa imagem!

inserir a descrição da imagem aqui


DICA

Uma vez definido um valor em uma @media vc não precisa repeti-lo nas @media subsequentes, pois uma vez declarado ele que fica valendo!

Funciona assim, tudo que vc declarar nessa regra fica valendo para telas com pelo menos 567px, para qualquer resolução acima disso é essa regra que vale, não precisa repetir em 768px e 992px como vc fez acima e usei como exemplo!

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .