@media screen not working correctly

Question

@media screen not working correctly

Navigation

#1 by (3 votes)
#2 by (1 votes)

3

I'm studying css and html yet, so I may be making some banal mistake, anyway I can not solve it myself. The problem is the following I defined in the @media screen a minimum width for it to change the img logo.

Original Size Logo Code:

.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 smaller than 480px it should go back to the original, but that does not happen.

Where am I going wrong?

html5 css3 media-queries

asked by anonymous 21.08.2016 / 16:37

2 answers

1

In case you can use (max-width) or maximum width, and when it reaches that width it will make the paper it.

21.08.2016 / 17:26

Function scanf with variable amount of parameters, how to implement? I can not leave JButton on top of JLabel

score 3 · Accepted Answer

You did not set the width, you set the height, repair:

min-height: 480px

replace with:

min-width: 480px

that will run perfectly.

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