Have 16:9 TV as a device view

I’m working on a site rework for a startup. Very important to them is their site demo to prospective B to B clients. So, the “presentation monitor” or TV, basically, is quite important to them.

I’m new to Webflow, but am super impressed so far. However, full-screen on a 16:9 display, the 960 wide container leaves a lot of extra space on the sides that could be designed to be used quite nicely. For example, on the current landing page i’m working on, there’s a 2x2 “features” section - 2 rows, 2 columns of an image with feature title and description. On desktop, it works fine in that layout - however, for a wide 16:9 display, it would look great to have 1 row of 4 columns.

Is there some way to do this now? Being new, maybe there is. But, if not, It might be nice to have a “TV” as an option as a device view.

edit: just as a footnote, was testing my published webflow site with safari’s developer “responsive design mode” – noticed they have “1920x1080” as one of their preview sizes. using that, i’d definitely like to use all that extra space. it looked more significant than i imagined. probably why apple includes that as a test resolution :wink:

2 Likes

I usually don’t use the default Containers, because their max width is pretty old-fashioned by today’s standards :slight_smile:

Instead, I create a div, give it a class ‘Container’ and a max width of around 1100-1200px and use it instead of the default Webflow containers.

Good luck!

3 Likes

It’s an interesting Idea,

I think the trouble is that Webflow is a visual designer and because of that the design has to fit on the screen you are designing on.

So if there is a larger media query but you are designing on a laptop, how does that get represented visually?

It’s an interesting design problem to say the least.

A standard full Hd computer screen is 16:9. Almost every laptop has 16:9 screen.

Ratio:
16:9 = 1,777777777777778

Standard HD Resolutions:
1920:1080 = 1,777777777777778
1280:720 = 1,777777777777778

It clearly siewny matter od you’re designing on 42" screen or 17" monitor - the aspect ratio of your screen is the same.

If you want to have less spacing on the sides of the browser, meaning that the default Webflow container should be above 960px, then your best option would be to use a div with max-size of, e.g. 1450px and design website inside of it. You can add a media query custom breakpoint at 980px to make your container div 940px and then follow along with other breakpoints :slight_smile:

[quote=“bart, post:4, topic:32839, full:true”]
A standard full Hd computer screen is 16:9. Almost every laptop has 16:9 screen.[/quote]
i think mine are 16:10, but close enough. but, you’re assuming that everyone displays their web browser full width on a multi-window computer environment, when it’s highly unlikely they do. however, when it’s a TV or presentation monitor, the user behavior is different – it’s highly likely that it’s displayed as a single window at full screen width. the situations are very different use cases, though the physical size of the screen is the same.

again, as noted, likely why apple engineers were savvy enough to include 1920x1080 as preview option in their “responsive design mode.”


sounds awesome. so… how do i do that, now? i love what webflow allows me to do without coding as a designer. but, as a new user, i’m also continually stumped by how much webflow engineers assume i know about coding.

from the very first video on the landing page, it makes it quite clear webflow is a tool for designers to create without coding, no? as it is, there’s barely any documentation, yet, either. i really find the marketing proposition and actual product steering philosophy misaligned on what seems to be the key product offering. the tool seems amazing, but if i don’t know how to use it, it fails.

so, going back on topic - how do i do this? thanks for the response!

1 Like

Webflow let’s you create websites without writing code.

You can use % or vh and vw units and test your design on a TV. Also is important research about how TV’s render content, you can take a look to this page to see what I mean. iPhone 6 Screens Demystified