0

Estou tentando que uma DIV apenas seja mostrada em telas pequenas, então defini o seguinte:

@media screen and (max-width: 460px) {
    #bloco{
        display: block;
        width: 100%;
        height: 50px;
        background-color: rgb(150,125,24);
    }

fora do mediaquerie está

#bloco{
    display:none;
    width: 100%;
    height: 50px;
    background-color: rgb(230,25,24);
}

porém não funciona. Testei o contrario:

display:none;

no css padrão e

display: block;

no breakpoint e funcionou, porque isso tá acontecendo?

12
  • Harry, como está o conteúdo exatamente? se o código que vale para as demais resoluções estiver depois da midiaquerie, ela vai sobrescrever o que você definiu na mesma... Commented 28/10/2016 às 11:31
  • 1
    No primeiro código tá faltando fechar as chaves. Commented 28/10/2016 às 11:32
  • o codigo das demais resoluções está depois. Todas as midiasqueies tem que ficar no final, após o código "principal"? por isso que alguns atributos não funcionam? Commented 28/10/2016 às 12:28
  • @Taisbevalle eu esqueci de cola o fechamento da chave aqui, mas no meu codigo ta fechada. Commented 28/10/2016 às 12:30
  • !important e seja feliz. Commented 28/10/2016 às 13:29

1 Resposta 1

0

O CSS possui o comportamento de leitura de cima para baixo, aplicando a regra que encontra por último.

Geralmente quando usamos media queries, elas acabam utilizando os mesmo seletores que já utilizamos anteriormente para definir algum padrão "genérico", portanto você precisa colocar a sua definição de media query ao final do arquivo para que ela sobrescreva as definições feitas anteriormente.

Vale lembrar que é uma boa prática realizar esse procedimento, pois facilita a busca por media queries, já que elas sempre estarão ao final do arquivo.

Espero ter ajudado.

1
  • 1
    Muito obrigado. Esse macete ajudou muito. Commented 31/10/2016 às 9:56

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 .