CSS Media Queries for Portrait Orientation

Use the CSS orientation media feature to apply styles when the viewport is portrait:

@media (orientation: portrait) {
  /* Styles apply when viewport height is greater than or equal to width. */
}

Portrait is determined by the shape of the CSS viewport, not by a phone’s physical rotation sensor. A square viewport counts as portrait. Use this query when a layout should change between tall or square and wide shapes; use width or aspect-ratio queries when the design depends on a particular breakpoint or proportion.

1. Write a portrait orientation query

Put the rules that should apply in portrait inside an @media block. Styles outside the block provide the base behavior and apply whenever the condition does not match.

/* Base layout: cards sit in a row. */
.cards {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

/* Tall or square viewport: stack the cards. */
@media (orientation: portrait) {
  .cards {
    flex-direction: column;
  }
}

You can also name the media type when that makes the rule clearer:

@media screen and (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

The media type is optional for ordinary screen styling. The relevant feature expression is (orientation: portrait). The CSS Working Group’s [Media Queries specification](https://www.w3.org/TR/mediaqueries-5/#orientation) defines the orientation feature, and [MDN’s orientation reference](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation) documents its practical behavior and example.

2. Understand what portrait means

The query compares the dimensions of the viewport used for layout:

• portrait: viewport height is greater than or equal to its width.
• landscape: viewport width is greater than its height.

The equality boundary matters: a square viewport matches portrait. The feature describes viewport geometry, not whether a device is a phone, whether a user is holding it upright, or the value of a physical orientation sensor. A narrow desktop browser window can match portrait, and a phone held upright can match landscape if the relevant viewport becomes wider than it is tall.

3. Choose orientation, width, or aspect ratio

What the design responds to	Use	Example
Switching behavior between tall or square and wide viewports	orientation	@media (orientation: portrait)
A minimum or maximum horizontal space	min-width or max-width	@media (max-width: 40rem)
A vertical space constraint	min-height or max-height	@media (max-height: 30rem)
A particular width-to-height proportion	min-aspect-ratio or max-aspect-ratio	@media (min-aspect-ratio: 4/3)

For example, if a navigation menu only becomes crowded below a specific width, express that width directly. Orientation alone does not guarantee a device class or a usable horizontal space. MDN documents the [width and height media features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width) and the [aspect-ratio feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio).

4. Test the viewport that evaluates the CSS

1. Resize the browser window across square, taller-than-wide, and wider-than-tall shapes.
2. Check the layout in a narrow desktop window as well as on mobile; both can produce a portrait viewport.
3. On mobile, test with the soft keyboard closed and open. The keyboard can change the available viewport dimensions and make landscape rules match while the device remains physically upright.
4. If the page is inside an iframe, inspect the iframe’s own viewport dimensions. Its shape can differ from the containing page.
5. Test the actual interface states affected by the rule, such as scrolling, fixed headers, and dialogs, at the dimensions where the query changes.

When debugging, inspect the viewport whose stylesheet is being evaluated rather than assuming the device’s display orientation determines the result.

5. Common problems and fixes

Symptom	Likely cause	Fix
Portrait styles apply on a square window	Square is included in portrait because height equals width.	Use a width, height, or aspect-ratio threshold if the square case needs separate treatment.
Landscape styles apply while the phone is held upright	The viewport became wider than tall, possibly after opening the soft keyboard.	Check the live viewport and test keyboard-open behavior. Use a width or height query if that is the real constraint.
The embedded page switches at an unexpected time	The iframe has its own viewport, whose dimensions may not match the outer page.	Inspect and test the iframe’s dimensions; choose a condition appropriate to that embedded layout.
The page changes on a desktop resize	The query responds to geometry, not device type.	Keep the rule if it solves the layout problem, or use a width breakpoint for a specific available-space threshold.
The query seems to have no effect	The viewport may not meet the condition, or another matching rule may override the declaration.	Check the evaluated viewport dimensions and the cascade, including selector specificity and rule order.

6. Keep the layout reliable and efficient

Orientation queries are a direct way to express a geometry-driven layout change. Keep shared declarations in the base rules and override only what must change inside the query. This makes the behavior easier to reason about when a viewport repeatedly crosses the square boundary.

Avoid using orientation as a proxy for mobile detection or as a substitute for a real width requirement. Consider intermediate aspect ratios, browser resizing, keyboard appearance, and embedded viewports when choosing the condition. The query itself does not require a JavaScript orientation listener; CSS can reevaluate the media condition as viewport dimensions change.

7. Or skip the browser setup

To inspect a real page while iterating on a responsive layout, ScreenshotNeo can return a screenshot through one API request. It is a website screenshot API and MCP server for developers, made by Yorker Media. The request below captures a page; use CSS media queries in your own stylesheet to change its layout.

ScreenshotNeo API documentation

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and 1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo.

Sign up for 1,000 free screenshots a month, with no card.

8. FAQ

Does a square viewport count as portrait?

Yes. Portrait includes the equality case where viewport height equals width.

Does this query read the phone’s rotation sensor?

No. It evaluates the viewport dimensions used for CSS layout.

Why can the result change when the keyboard opens?

A soft keyboard can alter the available viewport dimensions. If width becomes greater than height, the landscape condition matches even if the device remains upright.

Should I use orientation or aspect ratio?

Use orientation for the tall-or-wide category. Use aspect ratio when the design depends on a particular width-to-height proportion.

Can a desktop browser match portrait?

Yes. Any viewport whose height is at least its width matches the portrait condition.