Using css 'important' in both the media query cases

Question

I am creating a mobile application in which I am getting some error.

here my core style is for desktop:

.abc{
     width:1001px;
}

@media only screen and (max-width : 320px) {
.abc{
     width:320px!important;
}
}
@media only screen and (max-width : 480px) {
.abc{
     width:480px!important;
}
}

Here from the above styles only the style of 480px is applying for both the 320px and 480px.

Is there any alternate suggestion to come over this problem.

Answer 1

set a min-width

.abc {
    width: 1001px;
}

@media only screen and (max-width: 320px) {
    .abc {
        width: 320px;
    }
}

/* set a min-width here, so these rules don't apply for screens smaller than 321px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
    .abc{
        width: 480px;
    }
}

If I'm right you should be able to remove the !important syntax too...