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