CSS Media Queries For iPad in Landscape or Portrait Display

This CSS for Media Queries only applies when screen widths between 768px and 1024px and when displayed in Landscape or Portrait.

Example CSS for Media Queries which includes the logical operator and:

Landscape

Ipad

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

.div {....}

}

Portrait

Ipad

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

.div {....}

}

The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. Source

Related Tutorials

• Different Image On Mobile Orientation Change
• Different Background Image On Mobiles – Agency Pro
• How To Replace Images On Mobile Screens Only
• Change Backstretch Background Image When Mobile – AgentPress Pro