Search code examples
cssmedia-queriesmobile-phones

How to target small phones 3 inch or lesser with media query

I am trying to target small phones like 3 to 3.5 inches for Example:

HTC DESIRE C

using @mediaQUery but not able to do that .

I could target the standard mobile phone width that is as follow.

@media only screen and (min-device-width : 320px) and (orientation : portrait) {
    .bar {
        display:none !important;
    }
}
@media only screen and (min-width : 321px) and (orientation : landscape) {
    /* Styles */
    .par {
        display:none !important;
    }
}

JSFiddle

So what I want to do is show the class .par only when the width of the screen is equivalent to 3inch phones

Solution

  • Most of the resolution will fall within 320px

    So you have to changes min to below code 

    @media screen and (max-width: 320px){
/*YOUR CODE */
}