Streaming live at 10am (PST)

RWD viewports / breakpoints support doc's / tutorials?


#1

What is the best help / support file to better understand the RWD viewports or breakpoints that Webflow's

If i understand how the CSS breakpoints work, is that the webpage sniffer checks the device resolution and then serves up the correct viewport / breakpoint CSS that styles that layout / UI , correct?

I know @thewonglv has helped me on this topic before with the following

The breakpoints are:
****PHONE****
Phone-Portrait: <479 px | Anything less than 480 px shows Phone
Phone-Landscape: <767 px | 480 to 767 shows Phone-Landscape

TABLET
Tablet: <991px | anything less than 991 px and more than 767px get the Tablet .CSS

DESKTOP
Desktop: >991px Anything

And I believe that anything 1200px and above, this code snippet works / helps

p.s Webflow team / staff, I really wish there was a video that shed light on the webflow viewport philosophy and the breakpoints for media query logic..anyone else second this request #dreamWant wink

Keep up the great work #teamWF


I need help with custom breakpoints to keep my site pretty
Support for larger/custom media queries/breakpoints
#2

Have you watched http://tutorials.webflow.com/different-view-modes-inside-webflow ?


#3

hey team Webflow / @thesergie - what would happen with a Tablet where the user switches between /

Landscape and Portrait mode?

Would the 767 px to 991 px just be centered on the Landscape viewport on the tablet with more white (or background color) space on the left and right sides?


#4

Hey @clickryan if a user is using a tablet and is switching between portrait and landscape then the view will switch between the portrait view to the desktop view. If you keep all of your content within containers then your site should be optimized to be viewed in landscape and portrait tablets.


#5