wqu wqu - 5 months ago 10
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;
}

#mobilemenu{
display:block;
}

#navigation-mobile{
margin-left: 0px;
margin-right: 0px;
padding-left:0px;
padding-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

For ipad in landscape use

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}