media query css rule for a particular width size

[theceoforlife]

Am new with css media query and i have created a media rule for a particular device viewport and this media rule has its css styles in it . But the problem is that when i increase from maybe 319px to 320px the same css rule in 319px is still seen in 320px until when i increase to maybe 340px that’s when the css rule for 320px will come to play. Please someone should tell me where am getting it wrong . Thank you guys.

[Paulie_D]

We’d need to see the code.

[theceoforlife]

@media screen and (min-device-width: 50px) and (max-device-width: 319px) and (orientation : portrait) {

body {
background: black;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 359px) and (orientation : portrait) {

body {
background: green;
}

}

this is the code Thank you Mr Paulie_D

[theceoforlife]

this is also my viewport meta description:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

[Paulie_D]

Hmmm…perhaps you could make a demo showing the problem?

I’m not sure you need the device-width in the media query though…the meta tag takes care of that for you.

[theceoforlife]

Am also using bootstrap and it has it’s own media query rule . though I created some of the css so I need to create my media query rule that will work the way I want it.

[theceoforlife]

Might this be the problem?

[Paulie_D]

Possibly but until we see a demo it’s hard to help.

[theceoforlife]

Thank you sor

[Author]

Posts