@media screen not working properly

Question

I’m studying css and html still, so I may be making some banal mistake, I’m not able to solve alone. The problem is the following I set on @media screen a minimum width for it to change the img logo.

Code with original size logo :

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

With @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;
    }
}

@media even changes the logo, but with a minimum width less than 480px it should go back to the original, only this does not happen.

Where am I going wrong ?

Answer 1

You didn’t set the width, you set the height, notice:

min-height: 480px

replace with:

min-width: 480px

that will spin perfectly.

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

Answer 2

In case you can use (max-width) that is to say maximum width, and when it reaches that width it will make the Pape of it.