Streaming live at 10am (PST)

Responsive design for chromebook


#1

How can I make my website look good in a chromebook? It seems to be in-between the desktop and tablet sizes. Is there any workaround or way to easily custom-code for it?

Is there any practical way to make everything look good in the chromebook view besides tweeking the full size version until it looks good in both?

Does webflow have any plans to allow users to define their own breaks regarding image width?


#2

Hi, @vernon! We'll need some more information, because Chromebooks are made in many different sizes and have varying resolutions. :sunglasses:

For instance, the Acer CB3-431 which came out several months ago has a resolution of 1920 x 1080 while the original Google Cr-48 has a resolution of 1280 x 800. The Samsung Chromebook 3 is 1366 x 768.

These resolutions are in the same range as other entry- or mid-level laptop displays such as the 11" MacBook Air (1366 x 768), 13" MacBook Air (1440 x 900), the 14" Dell Inspiron 3000 (1366 x 768), and even the HP ProBook 455 (also 1366 x 768).

Webflow's Tablet breakpoint affects browser widths of 991px and below, and Webflow's container element defaults at a maximum width of 940px. You can, of course, create your own sections and containers using div blocks, but the Desktop view should cover all the common Chromebooks in terms of browser width. :+1:

There's an interesting thread here which talks about unlocking a larger media query (1200px): https://forum.webflow.com/t/activate-1200px-large-screen-media-query/611


#3

Hi @vernon,

If your looking to base the element sizes off screen size instead of zoom level, you can use the codes "vh" and "vw" to base sizes off height and width of the actual window size.


#4