Categories
CSS

How to force website to show in landscape mode only with CSS?

Spread the love

Sometimes, we want to force website to show in landscape mode only with CSS.

In this article, we’ll look at how to force website to show in landscape mode only with CSS.

How to force website to show in landscape mode only with CSS?

To force website to show in landscape mode only with CSS, we can set the width of the page in different orientations.

For instance, we write

@media only screen and (orientation: portrait) {
  #wrapper {
    width: 1024px;
  }
}

@media only screen and (orientation: landscape) {
  #wrapper {
    width: 1024px;
  }
}

to set the element with ID wrapper to width 1024px in portrait and landscape orientation.

Conclusion

To force website to show in landscape mode only with CSS, we can set the width of the page in different orientations.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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