CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Learning
Learning

Reputation: 20001

Responsive website and media queries

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..

Upvotes: 0

Views: 221

Answers (1)

blackhawk338
blackhawk338

Reputation: 386

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.

Upvotes: 2

Related Questions