Solved

Having problem with CSS media queries not targeting specifc devices

Posted on 2012-03-22
2
447 Views
Last Modified: 2012-04-08
I am having trouble with the CSS media queries.  The following css code isn't working to target specific devices.  I am stuck as to what I am doing wrong or what I am missing in the code.

/*Target IPAD In Portrait Mode */
@media (max-device-width: 1024px) and (orientation:portrait)
{
    
}

/*Target IPAD In Landscape Mode */
@media (max-device-width: 1024px) and (orientation:landscape)
{
    
}




/*Target Playbook In Portrait Mode */
@media (max-width:480px) and (max-height:1024px)  and (orientation:portrait)
{
   
}

/*Target Playbook In landscape Mode */
@media (min-width:480px) and (max-width:1024px)  and (orientation:landscape)
{
  
}



/* Large screens Samsung Galaxy ----------- */
@media (max-device-width : 1280px)  and (orientation:landscape)  {
   
}

@media (max-device-width : 800px)  and (orientation:portrait) {
  
}

Open in new window

0
Comment
Question by:stargateatlantis
2 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 37753061
There are no declarations inside the queries. You have to put something inside of the @media selectors:

@media (max-device-width: 1024px) and (orientation:portrait)
{
 #wrapper{width:600px;}   
}

Open in new window

0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 37760573
Did you remove the declarations inside the queries for brevity? If so:

Is it not working in all browsers, or just some?

Can you provide a link to a working page? If not, we're probably going to need to see more of your markup to help.

You might try being more specific in your query, for example:

@media only screen and (max-width:480px) 
{

}

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to put a "check" next to active checkboxes. 5 28
CSS Style Effect 2 18
Show MP4 file and close (HTA) 3 23
How to post data to an API using ASP Classic 3 31
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question