Responsive design is a key part of modern web development. While adjusting styles based on screen size is common, another important factor is the orientation of a device — whether it is in portrait or landscape mode. CSS provides the orientation media feature to handle this.

What is orientation?

The orientation media feature lets you apply different CSS rules depending on how a device is held:

This is especially useful for tablets, phones, and other devices that can rotate.

Basic Syntax

/* Portrait orientation */
@media (orientation: portrait) {
  /* Styles for portrait mode */
}

/* Landscape orientation */
@media (orientation: landscape) {
  /* Styles for landscape mode */
}

Practical Examples

1. Changing background color based on orientation:

@media (orientation: portrait) {
  body {
    background-color: lightblue;
    font-size: 18px;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightgreen;
    font-size: 16px;
  }
}

2. Adjusting layout for mobile devices in portrait mode:

@media (max-width: 768px) and (orientation: portrait) {
  .container {
    display: block;
    padding: 20px;
  }
}

How it Works

Tips for Using orientation

  1. Combine orientation with min-width or max-width for precise control.

  2. Use it for images, layouts, font sizes, or navigation menus.

  3. Test on real devices or browser developer tools to see how styles change when rotating.

Conclusion

The orientation media query is a simple yet powerful tool to make your website more responsive and user-friendly. By understanding how to apply CSS for portrait and landscape modes, you can ensure your website looks great on all devices, no matter how users hold them.