wqu wqu - 1 year ago 117
CSS Question

Responsive Design works in browser not in Landscape Ipad

@media only screen
and (min-device-width: 980px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
#menu {
display: none;

#mobile-nav {
display: block;
float: right;


margin-left: 0px;
margin-right: 0px;

The above code that I used to style a list on my webpage works on the browser if i inspect element and use google chrome to see changes, but when I try testing on my ipad in landscape mode the list item breaks, is there a way to fix this through media queries on an ipad?

Answer Source

For ipad in landscape use

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download