3

Estou estudando css e html ainda, então posso estar cometendo até algum erro banal, enfim não estou conseguindo resolver sozinho. O problema é o seguinte eu defini no @media screen uma largura minima para ele mudar a logo da img.

Código com logo tamanho original :

.logo {
    width: 56px;
    height: 56px;
    float: left;
    background: url('../img/logo-mobile.png') center center/56px no-repeat;
    font-size: 0;
}

Com @media screen

@media screen and (min-height: 480px){
    .logo {
        width: 214px;
        background: url('../img/logo.png') center center/214px no-repeat;
        font-size: 0;
    }

    .btn {
        font-size: 2em;
    }
}

O @media até muda a logo, porém com uma largura minima menor que 480px ela deveria voltar para a original, só que isso não acontece.

Onde estou errando ?

1
  • Veja se minha resposta ajuda, se for o caso poderia validá-la, se não comenta que nós ajustamos.
    – MagicHat
    Commented 21/08/2016 às 15:29

2 Respostas 2

3

Você não definiu a largura, você definiu a altura, repara:

min-height: 480px

substitua por:

min-width: 480px

que vai rodar perfeitamente.

@media screen and (min-width: 480px){
.logo {
    width: 214px;
    background: url('../img/logo.png') center center/214px no-repeat;
    font-size: 0;
}}
4
  • sim hahaha, depois de ter postado eu vi isso.
    – Furabio
    Commented 21/08/2016 às 15:44
  • Nesse caso entre 480px e 1800px a regra será apliicada correto?
    – MagicHat
    Commented 21/08/2016 às 19:20
  • Se o width for menor que 480 vai mostrar a logo mobile dele, caso seja maior, vai mostrar a outra logo, não importa o tamanho que for ( desde que seja maior que 480 ). Caso ele queira colocar outra logo pra uma resolução muito maior é só criar outro @media screen. Mas dessa forma ele vai mostrar a logo normal para qualquer resolução que for maior que 480 e vai mostrar a logo mobile para qualquer resolução que for menor que 480. Commented 21/08/2016 às 19:28
  • Foi o que pensei, eu costumo fazer do maior pro menor, por isso uso max-width.
    – MagicHat
    Commented 21/08/2016 às 19:55
1

No caso você pode usar (max-width) ou seja largura máxima, e quando atingir essa largura ele fará o pape dele.

1
  • vlws deu certo, obrigado ^^
    – Furabio
    Commented 21/08/2016 às 15:32

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 .