2

Estou tentando criar um layout responsivo. Alguns elementos ele está aplicando o css conforme citado no media queries, alguns outros está pegando css do web. Como posso concertar pra ele pegar o css correspondente do que eu quero? Porque isso ocorre?

Segue exemplo:

.scss:

@media (min-device-width: 320px)
and (max-device-width: 564px){
.button-collapse{
    background-color: red;
    border: none;
    color: red;
    outline: none;
  }
}

.button-collapse{
  background-color: transparent;
  border: none;
  color: white;
  outline: none;
}

Neste caso, usando um dispositivo 320px width ele está pegando as propriedades fora do media querie, porque ocorre isso? Segue imagem com mais detalhes.

inserir a descrição da imagem aqui

3
  • Sua media query especifica um mínimo e um máximo. Significa que só será aplicável para dispositivos de largura que esteja entre os dois valores, não? Telas maiores que o mínimo de 320px e menores que 564px aplicam o CSS dentro da media query. Qualquer outra coisa (menores que 320 ou maiores que 564) fica de fora...
    – nunks
    Commented 21/06/2018 às 3:08
  • Sim, mas eu estou testando em um dispositivo de 320width... Ele deveria pegar a cor vermelha, mas está pegando a cor branca Commented 21/06/2018 às 3:10
  • ops, verdade, percebi logo depois que mandei o comentario mas nao deu tempo de deletar antes de você esclarecer, agora fica registrada a minha falta de leitura completa da pergunta, desculpa ae, hahah... a resposta do dvd resolve: media queries devem ser mutuamente excludentes e sempre depois das regras globais, pra não dar dor de cabeça ^^'
    – nunks
    Commented 21/06/2018 às 3:18

1 Resposta 1

1

O @media rule deve vir após o estilo normal. Basta alterar a ordem:

.button-collapse{
  background-color: transparent;
  border: none;
  color: white;
  outline: none;
}

@media (min-device-width: 320px) and (max-device-width: 564px){
.button-collapse{
    background-color: red;
    border: none;
    color: red;
    outline: none;
  }
}

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 .