# Orientation changes — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/orientation-changes

> Handle portrait-to-landscape transitions gracefully with CSS media queries for orientation.

## Detecting device orientation

Use `@media (orientation: portrait)` or `@media (orientation: landscape)` to apply different styles when the device rotates.

## Responsive to rotation

Hide or rearrange content based on portrait vs landscape mode.

```css
/* Portrait: vertical layout */
@media (orientation: portrait) {
  .container { grid-template-columns: 1fr; }
}

/* Landscape: horizontal layout */
@media (orientation: landscape) {
  .container { grid-template-columns: 1fr 2fr; }
  .sidebar { display: none; } /* Sidebar too cramped in landscape */
}
```

## Handling landscape orientation

Adjust layout, hide sidebars, or reflow content for landscape.

```css
@media (orientation: landscape) and (max-height: 500px) {
  .sidebar { display: none; }
  .header { padding: 8px 0; }
  main { max-height: 80vh; overflow-y: auto; }
}
```