Hey guys, we have another new feature for you that I think you’ll find really useful when creating responsive designs that work on a wide range of devices. We call it the “canvas resize handle”, and it’s available now in the main Webflow Designer interface:
You can drag this handle (or any part of the edge of the canvas, actually) to preview the way that your website will look at various resolutions in that “device range”. For example, when I’m in “Phone Portrait” mode, I can now resize the canvas to preview what the iPhone 6 Plus (which has a 414px horizontal resolution) would display:
Previously, our design for the http://interactions.webflow.com/ page was optimized for the previously-standard 320px iPhone resolution, but we can see now that at other resolutions the design is not ideal. The word “Interactions” gets cut off in certain lower resolutions, and it would be great if we could fix it.
For this particular case, I’m going to take advantage of CSS support for setting font size (and line height) relative to the viewport width. You can read more about the
vw unit and this general technique here, but please keep in mind that it’s not supported in IE9 and below
Using the canvas resize handle, I can make sure that my new
12vw value for Font Size and Line Height looks great across all resolutions in that media query:
Voila! Now the “Interactions” word isn’t cut off on really small devices, and the design looks better on larger devices like the new iPhone 6 Plus.
We’re still tweaking this feature, so please send us any feedback and suggestions that come up as you start using it.