0

Olá, boa tarde!

Estou criando um web site responsivo, com isso preciso criar os breakpoint para ir se ajustando conforme as resoluções de tela. Porém, estou com um problema aonde eu consigo mexer na div somente em uma mídia .. Exemplo:

@media screen and (min-width: 1024px) {.servico {width:40%;}}

Certo, atribui que ao chegar a 1024 pixel o tamanho da minha class serviço mudará para 40%, com isso eu preciso que quando a resolução ficar maior eu utilize um novo tamanho para class serviço, sendo assim, usarei da seguinte forma:

@media screen and (min-width: 1100px) {.servico {width:20%;}}

Só que no breakpoints em que estou criando, apenas está à ler o primeiro, já o de 1100 pixel não lê..

Alguém sabe o porque disto acontecer? Estou realizando algo de errado?

Obrigado!

4
  • 1
    Você colocou a segunda regra (min-width: 1100px) depois da primeira (min-width: 1024px)?
    – Costamilam
    Commented 24/02/2019 às 20:58
  • Boa noite, Sim, a regra 1024px está em cima da 1100px!
    – Denilson
    Commented 25/02/2019 às 3:07
  • @Denilson Cara, da forma que vc postou seu CSS, era pra funcionar. Salvo a questão da ordem das media queries. Tem mais alguma estilização em cima dessa classe? Postar TUDO referente a essa classe no seu .css pra gente dar uma analisada.
    – LipESprY
    Commented 25/02/2019 às 3:16
  • Amigo se possível coloque seus @media completos na ordem como aparecem no seu .CSS. E veja se isso resolve seu problema pt.stackoverflow.com/questions/351972/…
    – hugocsl
    Commented 25/02/2019 às 11:01

1 Resposta 1

0

tente adicionar:

@media screen and (min-width: 1024px) and (max-width: 1099.98px) {}

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 .