How to use different CSS styles depending on screen orientation

Most modern browsers support the orientation media attribute, which allows you to define specific styles for devices in portrait or landscape mode. This is especially useful when designing websites for mobile devices.

Here is how you use the orientation media selectors:

@media screen and (orientation:portrait) {
    /* Portrait styles */

@media screen and (orientation:landscape) {
    /* Landscape styles */

This selector is supported by all modern mobile browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see