Orientation changes

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.

/* 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.

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