iPad portrait css styling isn't working

Question

I need to float a div to the left when on the portrait mode via iPad. No matter what code that's inserted, nothing changes. Here's what I'm doing:

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .logos{
     float: left;
   }
 }

The site I'm working on: http://rachelsilberman.com/rob-anolik/

The "logos" div pushes down when someone is on the iPad, and I need it to float left so it will align with the contact div.

I've been using ipadpeek.com to view the outcome since I don't have one myself. Hopefully that doesn't make a difference.

Thanks!

Answer 1

You should be adding the attribute to your ipad css like below:

    @media only screen and (min-device-width: 768px) 
and (max-device-width: 1024px) and (orientation:portrait) {
      .logos{
         float: left;
       }
     }

GENERAL RULE FOR CSS FOR IPAD IS LIKE BELOW:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Answer 2

I figured it out tonight. This may help others. I had to comment out the following line in my library.php file:

<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->

After this, everything referred to the main style.css sheet which I wanted. I included two statements:

@media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {

and

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

Due to the issues I was observing on a Blackberry Playbook versus an iPad, I had to introduce the second @media line. I simply tweaked the values within those sections of my style.css code and voila! Everything works finally.

Here's a great site on the different sizes for screens: http://nmsdvid.com/snippets/