Good afternoon!
I'm working the first time with @media queries, I read a few vi examples but when I realized my project I saw that it is not using the settings according to the last measure. Could anyone tell me what might be happening?
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ó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>
