Solved

Having problem with CSS media queries not targeting specifc devices

Posted on 2012-03-22
2
450 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: 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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

696 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