CSS Academy · Lesson

Width Height and Orientation Queries

Target specific viewport dimensions and device orientations with media features.

width Media Feature

The width feature targets the viewport width. Use min-width and max-width to define ranges.

@media (min-width: 768px) {
  /* 768px and wider */
}

The height feature targets the viewport height. Useful for short viewports (like landscape phones) where vertical space is limited.

@media (min-height: 600px) {
  .hero { min-height: 80vh; }
}