CODEWITHSUNDEEP
cssipadresponsive-design
wqu
wqu

Reputation: 505

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?

Upvotes: 1

Views: 34

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

For ipad in landscape use 

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

Upvotes: 1

Related Questions