Will there be Tablet Landscape view?

Publishing help General
1

Hello,

So, there are views for every orientation except Tablet Landscape.

This is sort of slowing down my workflow because I need to make a separate CSS for Landscape only. For example, I have a hover effect for the web, however I need to display the block for mobile, but i’m not able to have it display block for Tablet Landscape because it’s getting whatever is on the Desktop view.

I hope this is in the works!

1 Like
2

@liberrtines Tablet Landscape is the same resolution as Desktop (960px). Because media queries are based on the resolution of the browser viewport, to CSS there is no distinction between Tablet Landscape and Desktop if the Tablet landscape has the same resolution as desktop.

3

In this particular case, we should consider some kind of touch-specific rules. Hover state is a problem on touch devices regardless of resolution. We’ll be sure to post updates when we come up with a good solution for this.

-Dan

4

Ah! Yes, I keep forgetting.
I set the width of my site to 1200px by inputing this code in the header because I needed a wider container.

@media screen and (min-width: 1129px) {
    .w-container {
      max-width: 1129px;
    }
  }

Since I do that, I must add this to change the .css for landscape orientation only on Tablets.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { }
5

@thesergie, A Tablet Landscape view will be a good thing to add, so we can reduce the content for that view. Problems arises when it takes the same view as desktop, at times content overlap on background images on the tablet that will not overlap on a desktop.

6

I know there is a app out there I messed with last year that uses a slider to set media queries… and you could see the behavior of the site as you moved the slider. And at each custom one you set… you could style the site how you saw fit.

I wasn’t a big fan of the app. But that option was really cool to have.

7

Is it possible for is to use a browser query rather than window size? Having to plan for landscape view on tablet essentially eliminates the ability to use any fancy desktop browser effects and plan the entire site around landscape iPads. If we could query by browser, we’d be able to account for tablets.

8

@thesergie, the problem am facing now is that since the desktop view and the tablet landscape are the same, am facing problems with video background. you know video backgrond is not supported tablets. so please bring a landscape tablet view

9

Hi @dannesh, you can add a background image for touch devices as described in the article below:

http://matthewtyas.com/html-5-background-video-with-image-fallback-image-for-touch/

This at least, should solve your issue of playing background when encountering landscape tablet views.

Cheers

10

@cyberdave, this uses a fullscreen image for touch devices instead of video. That is exactly what i have done but the problem is that, it will show the image only in portrait view. since here at webflow, tablet landscape is the same as desktop view, it show video on landscape mode on tablet. but since video background is not supported, you see a black screen.