EN
CSS - style elements only for landscape orientation
0
points
In this article, we would like to show you how to style elements only for landscape orientation in CSS.
Quick solution:
@media (orientation: landscape) {
.element {
/* put landscape styles here */
}
}
Where:
landscapestyles are applied to the element when the viewportwidth>height.
Practical example
In this example, div element background will be orange on landscape orientation (horizontal) only.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
height: 500px;
}
@media (orientation: landscape) {
div {
background: orange;
}
}
</style>
</head>
<body>
<div>Web page content here...</div>
</body>
</html>