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">