Ipad media query (landscape)

Question

I cannot see changes to the landscape ipad version This is the site http://bit.ly/site-demo In responsive.min.css I added this rule:

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : landscape) {   
  .q_logo{
    width:22%;
  }
  .header_menu_bottom .main_menu{
    left:37,0%;
  }
}

But the rule is not working. How do I resolve this?

Try using the media query used in this [solution](http://stackoverflow.com/a/9504571/3008050) — karan3112, Jul 29 '14 at 15:51
Is the CSS definitely uploaded? Searching through the source, nothing can be found for '1024px', for example. — Tony Barnes, Jul 29 '14 at 16:02
Is the CSS definitely uploaded to the server? Also, there is a typo in the media query. This: `left:37,0%;` should be `left:37%;` — Tony Barnes, Jul 29 '14 at 16:24
No this is the only one in 1024. There is a vertical css dedicated to responsive but does not conflict with the landscape. This is the code of responsive.min.css jsfiddle.net/elpupi86/37MUN — user1269141, Jul 29 '14 at 16:30
The css is loaded on the server. can also be seen from firebug http://bit.ly/site-demo — user1269141, Jul 29 '14 at 16:46

score 0 · Accepted Answer · answered Jul 29 '14 at 16:25

0

Ok after debugging you css file found this issue. You have missed a closing bracket for this query @media only screen and (max-width:420px) {. This should solve your problem.

answered Jul 29 '14 at 16:25

karan3112

1,867
14
20

I corrected the error but the problem is still there. – user1269141 Jul 29 '14 at 16:39
Now test that rule that I had suggested before and see if that is working? Also you will have to test this in a device as you have used orientation which cannot be tested on desktop or any online emulator – karan3112 Jul 29 '14 at 16:55
I've set up everything you've written but I see no change. I don't have an ipad but I'm testing on the emulator for ipad on xcode – user1269141 Jul 30 '14 at 14:18
If you comment the orientation change part in media query and resize the window it works fine. That means the other CSS is correct but there might be some bug in your media query for iPad. – karan3112 Jul 30 '14 at 15:47
Test your CSS for iPad, try body{display:none;} in the iPad CSS and see if this change is visible.. – karan3112 Jul 30 '14 at 15:50
When I set body {display: none;} works, and even if I set the rules out of the media query are displayed. The problem is with wordpress I can not set a specific display for ipad landscape. To insert the ipad.css I used the function.php because header.php did not see me and I used add_action('wp_print_styles', 'add_custom_css'); function add_custom_css() { $url = 'http://www.mysite.it/wp-content/themes/nouveau/css/ipad.css'; wp_register_style('custom', $url); wp_enqueue_style('custom'); } But here I can specify something for the media? – user1269141 Jul 31 '14 at 08:28
the only media query that displays is @media (orientation:landscape) but this also applies the changes to the desktop version. – user1269141 Jul 31 '14 at 09:27
ok works with @media only screen and (min-width: 768px) and (max-width: 1024px) – user1269141 Jul 31 '14 at 09:57
If my suggestion was helpful, kindly mark it as correct answer. – karan3112 Aug 04 '14 at 09:40

Ipad media query (landscape)

1 Answers1