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