Have you ever worked with a vertical viewport as webmasters? Or only with horizontal one?

All CSS literature I ever read is on (horizontal) viewport;
as in @media screen and (min-width: 959px).
To me the min-width there is an "horizontal" virtue instead of min-height that I would have considered a "vertical" virtue.

Is vertical viewport (theoretically @media screen and (min-height: 959px) even a thing in web design (either for smartphone-native apps or browser apps)?

  • 2
    Every time I ever see anybody using their phone to browse the web, they hold them in a vertical position. Google images shows vertical pictures if you search: google.com/search?tbm=isch&q=phone+web+browse Where are you getting the info about designing for horizontal? – Stephen Ostermiller May 20 '19 at 8:45
  • I got it from me always defining @media screen and (min-width or max-width) but never give any directive for vertical/height scalars. – user58733 May 20 '19 at 9:08
  • What exactly do you mean by "vertical/horizontal viewport"? I assume you're referring to the aspect ratio / orientation of the screen? However, this doesn't really have anything to do with using min-width / max-width in your media queries and as a web designer you can't really avoid working with both portrait ("vertical") and landscape ("horizontal") viewports?! – MrWhite May 20 '19 at 16:01
  • To me horizontal means "width" and vertical means "height", at least in the HTML-CSS context. – user58733 May 20 '19 at 19:12
  • So, why do you use min-width / max-width and not min-height / max-height? What would using height in this context signify? How would it change the way you design the page? Are you designing to the viewport width or height? – MrWhite May 21 '19 at 15:23

min-width tends to be favored over min-height in CSS because of the way that web pages scroll. Web pages typically have a single scroll bar that scrolls the page up and down vertically. Having two scrolling directions is usually bad for usability. Having only horizontal scrolling is technically difficult.

  • Text works better with vertical scrolling because lines are read from right to left. Long lines of text with horizontal scrolling requires scrolling back and forth between the end of one line and the beginning of the next.
  • HTML blocks by default are 100% width and expand in height to fit their contents.
  • Computer mice typically have only vertical scroll wheels. That makes horizontal scrolling less convenient for desktop users.

You could conceivably produce web page that scrolls horizontally but not vertically for some limited use cases. I can imagine a layout of images side by side could work very nicely.

To get text to work nicely horizontally, you would need to use a column layout like a newspaper where text from the bottom of one column wrapped dynamically into the top of the next column depending on the height of the screen. The number of columns would be dependent on the amount of text. I don't think such a beast exists in HTML. The CSS columns layout makes you specify the number of columns up front. See this question on Stack Overflow: HTML5 CSS Horizontally Scrolling multiple dynamic number of columns

You can even find a few examples of horizontal scrolling web pages. This site appears to give awards for well designed ones. However, I spot checked several of them and only found a few of them still work well scrolling horizontally. Several seem to have changed their design to a standard vertical scroll. Others ask me to rotate my device (a portrait monitor!) to be able to use the page. Clearly designing horizontally scrolling web pages is technically challenging, even for award winning web designers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy