CODEWITHSUNDEEP
htmlcss
Talha Aslam
Talha Aslam

Reputation: 39

Css media query not loads with specific screen

I have to apply height for two different screen 1080px and 1000px.

I have added following media query:

@media only screen and (max-height:1080px){
    #wrapper {
        width: 1884px;
        height: 1080px;
        float: left;
    }
    .filter-selection ul li
    {
        height:109px;
    }
}


@media only screen and (max-height:1000px){
    #wrapper {
        width: 1884px;
        height: 1000px;
        float: left;
    }

    .filter-selection ul li
    {
        height:106px;
    }
}

When i switched to 1080px the issues remain's same, it call's the media query for 1000px.

http://ddslauncher.com/inventory-new/

Thanks in advance.

Upvotes: 0

Views: 77

Answers (3)

cfreear
cfreear

Reputation: 1875

The media queries in your example are the other way round from your question. They are:

@media only screen and (max-height:1000px){

    #wrapper {
        width: 1884px;
        height: 1000px;
        float: left;
    }

    .filter-selection ul li
    {
        height:106px;;
    }
}


@media only screen and (max-height:1080px){
    #wrapper {
        width: 1884px;
        height: 1080px;
        float: left;
    }

    .filter-selection ul li
    {
        height:109px;;
    }
}

(the issue here is that when the screen is below 100px in height both queries match and the second one is applied ass CSS 'cascades' down.)

instead of:

@media only screen and (max-height:1080px){

    #wrapper {
        width: 1884px;
        height: 1080px;
        float: left;
    }

    .filter-selection ul li
    {
        height:109px;
    }
}


@media only screen and (max-height:1000px){
    #wrapper {
        width: 1884px;
        height: 1000px;
        float: left;
    }

    .filter-selection ul li
    {
        height:106px;
    }
}

Using this second example should fix your issue.

EDIT Apologies for the formatting issues, something is interfering with my SO edits.

Upvotes: 1

Maciej Wojcik
Maciej Wojcik

Reputation: 2171

I saw yours stylesheet. in css u have "min-height". I suggest to change into max-height, and used "!important" adnotation.

Upvotes: 0

Fazil Abdulkhadar
Fazil Abdulkhadar

Reputation: 1101

You can use the percentage width instead of fixed. something like the following. Also it would be great if you can run the media query based on Viewport width not height.

@media only screen and (max-height:1080px){
#wrapper {
width: 100%;
height: 1080px;
float: left;
} 
}

Upvotes: 0

Related Questions