0

I am using a css media query to detect portrait mode on a iPad and apply a centring style to a div with fixed or absolute positioning, I have tried both to no avail. The query is working but the div won't centre in portrait mode. It will centre perfectly fine in landscape.

you can view the site live at http://goodmorningmoon.ca pass: springy88

Here is my code 

    @media only screen and (max-device-width: 1024px) and  (orientation:portrait) { 
    #logo{ position:absolute; left:50%; width:160px; margin-left:80px;}

}

Thanks! in advance.

Cool Guy Yo
  • 5,290
  • 13
  • 54
  • 85

2 Answers2

1

I was missing the -negative symbol oops

@media only screen and (max-device-width: 1024px) and  (orientation:portrait) { 

    #logo{position:absolute; width:160px; margin-left:-80px; left:50%; }

}
Cool Guy Yo
  • 5,290
  • 13
  • 54
  • 85
0

your current query is using the max-device-width - and this attribute refers to the devices screen-width; it won't change based on orientation or size of browser-window. The max-width refers to the actual browser-window and will in this case give you the desired result.

You can read more on this topic here

Community
  • 1
  • 1
jblange
  • 1
  • 1