CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queries
user3353748
user3353748

Reputation: 327

media query doesn't work

Seems like i've done everything correctly, but it just wouldn't not work. It doesn't display when inspecting element as well. To check if it's media query, tried setting a different bg color.

@media screen and (max-width:1050px) {
  #hmbn {
    width:400px !important;
    background-color:red !important;
  }
}

The div is placed inside bootstrap row

http://jsfiddle.net/CH8Hb/

Upvotes: 0

Views: 1809

Answers (3)

Turnip
Turnip

Reputation: 36742

This is caused by the floating elements within #hmbn

Bootstrap has a buiilt in clearfix. Add the class clearfix to #hmbn

<div id="hmbn" class="clearfix">
    ...
</div>

WORKING DEMO

The following no longer applies after the question was edited...

Remove the ;

@media screen (max-width:1050px) {

Upvotes: 2

Bram Vanroy
Bram Vanroy

Reputation: 28554

Here you go.

@media screen and (max-width:1050px) {
    #hmbn {
        width:400px;
        background-color:red;
    }
    .im1fill {
        float:none;
    }
}

Explanation: #hmbn didn't receive I height, which was caused by a not displaying as block, which was caused by the floating of the divs inside the anchors. Remove the float, and you fix everything. You can get rid of the !important tags as well.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Try this it will work fine!

@media (max-width: 1050px) {
    #hmbn {
        width:400px;
        background-color:red;
    }
}

DEMO

VERY IMPORTANT:

this will work fine:DEMO

@media (max-width: 1050px) {/*1.position*/
    #hmbn {
        width:400px;
        background-color:red;        
    }
}

@media (max-width: 650px) {/*2.position*/
    #hmbn {
        width:40px;
        background-color:orange;        
    }
}
@media (max-width: 480px) {/*2.position*/
    #hmbn {
        width:10px;
        background-color:green;
    }
}

because the computer is reading it from the top to the bottom and overwrite the style

this will not work: DEMO

@media (max-width: 480px) {/*1.position*/
    #hmbn {
        width:10px;
        background-color:green;
    }
}

@media (max-width: 650px) {/*2.position*/
    #hmbn {
        width:40px;
        background-color:orange;        
    }
}
@media (max-width: 1050px) {/*3.position*/
    #hmbn {
        width:400px;
        background-color:red;        
    }
}

Upvotes: 0

Related Questions