Mobile responsive behaviour in tablet landscape mode

Support
#1

Hi there,

I was wondering if you could help me? This question has come up a few times in recent projects, and I wondered if you had any general advice. I believe that the vast majority of people do not view websites on a tablet in landscape mode, but it seems there are a few that do. When designing pages with columns and making them mobile responsive during design, your breaking points do not display a tablet in landscape mode, only in portrait. This means that my websites are displaying columns that were designed for desktop on a landscape tablet screen size, which really messes up the design. I’d prefer that the website is stacked on this screen size, but not for smaller laptop screens for example. I am a bit stumped on how to fix this in a streamlined way, as in Pro there isn’t a way to factor in landscape tablet screen sizes. I wondered if you had any advice on this in general or any way to fix this in CSS in the Customiser. Many thanks for your help in advance.

#2

Hello Jayd,

Thanks for writing in!

Our break points are these:

  • XL = 1200px and up
  • LG = 980px - 1199px
  • MD = 768px - 979px
  • SM = 481px - 767px
  • XS = 480px and below

The Tablet screen size falls under the MD size. Did you know that the tablet screen resolution like the iPad has 1080 x 768 pixels. On portrait, the screen width is 768 pixels and on landscape, the screen width is 1024 which falls under the LG breakpoint. This is the reason why as you rotate your tablet, the desktop layout is showing in your tablet’s landscape orientation.

Hope this explains the table screen size briefly.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.