@media query not taking effect

Question

This is my first time working with css media queries. Now I'm looking to do media queries for mobile devices. I'm starting out out with making a media query for a phone with 240x320. As such I have started my media query as follows:

@media only screen and (max-width:240px){


}

From this link I'm lead to believe that the logic of the statement should hold. i.e. when the browser window gets equal to or smaller than 240px the css in there should kick in. For some reason though this doesn't happen? Here is my full css:

@media only screen and (max-width:240px){

            .inputbox
            {
                width: 64%;
                border: 1px solid black;
                border-bottom-right-radius: 2em;
                border-top-right-radius: 2em;
                /*box-shadow: inset 0px 2px 2px #ececec;*/
                display: inline;
                padding: 0.55%;
                font-size: 100%;
                margin-top: 0px;
                margin-bottom: 1%;
            }

            .labelbox
            {
                border: 1px solid black;
                border-bottom-left-radius:2em;
                border-top-left-radius: 2em;
                padding: 0.55%;;
                display: block;
                background: #e9f939; /* Old browsers */
                padding-right: 7px;
                color:black;
                float:left;
                width:30%;
                font-size: 100%;
                text-align: center;
            }

        }

        .inputbox
        {
            width: 80%;
            border: 1px solid black;
            border-bottom-right-radius: 2em;
            border-top-right-radius: 2em;
            /*box-shadow: inset 0px 2px 2px #ececec;*/
            display: inline;
            padding: 0.55%;
            font-size: 100%;
            margin-top: 0px;
            margin-bottom: 1%;
        }

        .labelbox
        {
            border: 1px solid black;
            border-bottom-left-radius:2em;
            border-top-left-radius: 2em;
            padding: 0.55%;;
            display: block;
            background: #e9f939; /* Old browsers */
            padding-right: 7px;
            color:black;
            float:left;
            width:17.5%;
            font-size: 100%;
            text-align: center;
        }

Any ideas as to what I'm breaking?

Answer 1

Problem :

Any css-tag takes the last declaration for it's style if condition is not defined on it through media query....so when you have defined the media-query, it operates but since after that query...there is a generic style defined, that generic style over-writes your media-query style.

Solution :

Swap the media query to the last and place generic css on top of it : see demo here

  /* generic css first */
.inputbox {
    width: 80%;
    border: 1px solid red;
    border-bottom-right-radius: 2em;
    border-top-right-radius: 2em;
    /*box-shadow: inset 0px 2px 2px #ececec;*/
    display: inline;
    padding: 0.55%;
    font-size: 100%;
    margin-top: 0px;
    margin-bottom: 1%;
}
.labelbox {
    border: 1px solid black;
    border-bottom-left-radius:2em;
    border-top-left-radius: 2em;
    padding: 0.55%;
    ;
    display: block;
    background: #e9f939;
    /* Old browsers */
    padding-right: 7px;
    color:black;
    float:left;
    width:17.5%;
    font-size: 100%;
    text-align: center;
}

  /* media-query below the generic */
@media only screen and (max-width : 240px) {
    .inputbox {
        width: 64%;
        border: 1px solid black;
        border-bottom-right-radius: 2em;
        border-top-right-radius: 2em;
        /*box-shadow: inset 0px 2px 2px #ececec;*/
        display: inline;
        padding: 0.55%;
        font-size: 100%;
        margin-top: 0px;
        margin-bottom: 1%;
    }
    .labelbox {
        border: 1px solid black;
        border-bottom-left-radius:2em;
        border-top-left-radius: 2em;
        padding: 0.55%;
        ;
        display: block;
        background: #e9f939;
        /* Old browsers */
        padding-right: 7px;
        color:black;
        float:left;
        width:30%;
        font-size: 100%;
        text-align: center;
    }
}

Answer 2

The problem is that you have your normal (non 240px) styles defined after the media query, so they're overriding the styles in your query. Reverse the order and you'll be fine. (Media queries do not affect CSS specificity.)