0

I am using media queries as below

@media (min-width:100px) and (max-width:639px)  
{
}
@media (min-width:640px) and (max-width:960px)  
{
    .box  {background-color:red;}
}
@media (width:768px)
{
    .box  {background-color:green; }
}
@media (min-width:961px)
{
}

I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in @media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 @media (min-width:768px)

At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.

How can i target certain element using media queries for specific devices

example :http://jsfiddle.net/X43Et/

Update:

I am not sure what exactly was wrong with it put i copy pasted @media (width:768px) { part from fiddle & it works in my actual page. May be some invisible typo mistake..

3
  • Did you try with important keyword? May 20, 2014 at 10:38
  • Yes I tried !important keyword & to my surprise it works on fiddle but not in the actual web page. Media queries are arranged in same order as on fiddle..
    – Learning
    May 20, 2014 at 10:41
  • At present it is still showing me box as red while it should be red, what do you mean??? May 20, 2014 at 10:44

1 Answer 1

2

This is just an example of media queries You would want to have your normal css before the media queries

#gallery-1 img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
    #gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
    #gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
    #gallery-1 img {width:540px;}
}

And when you're using media queries, you want to specify that you want the screen size so you use screen after @media. I hope this is what you were looking for and will help you!

Here is a small example script I made

<style>
#box {
    width: 500px;
    height: 200px;
    background: yellow;
    border: 1px solid #000;
}
@media screen and (max-width:1000px) {
    #box { background: red; }
}
@media screen and (min-width:1000px) and (max-width:1200px) {
    #box { background: green; }
}
@media screen and (min-width:1200px) and (max-width:1400px) {
    #box { background: blue; }
}
</style>
<div id="box">

</div>

On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.

3
  • What is difference between @media screen and (min-width: 1366px) and @media (min-width: 1366px)` it just confused me..
    – Learning
    May 20, 2014 at 10:48
  • 1
    in the second one you aren't defining that you want the screen width, that's why after the @media tag you put screen so it knows to look at the width of the screen. May 20, 2014 at 10:49
  • I will write a small script with a box, give me a min or two May 20, 2014 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.