Solved

Having problem with CSS media queries not targeting specifc devices

Posted on 2012-03-22
2
444 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why a span is lower 2 26
Change Firefox bookmarks menu font size 2 31
Are these icons a web font? 3 21
2 separate CSS animations 2 16
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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