Great! Responsive Widgets! Now what am I missing?

[Tim]

I've gone over to the demos and the widgets aren't responsive.  Ok so maybe you haven't updated the website.  
So where is the documentation?  I blame it on my add

[Sebastian]

Hello Tim,

When you browse the following online demos:
http://demos.kendoui.com/mobile/adaptive/scheduler.html
http://demos.kendoui.com/mobile/adaptive/grid.html

from desktop and mobile devices, the grid and scheduler should automatically adapt to the viewport.

The rest of the online demos of our Web and DataViz widgets are designed for desktop viewing, however when you use our widgets in your apps they should utilize some mobile viewport improvements when rendered.

I hope this explanation clarifies what to expect from our Web and DataViz widgets in terms of adaptive rendering.

Kind regards,
Sebastian
Telerik

[Tim]

Well, I'm messing around with k-menu and I'm not really seeing how it is supposed to "automatically adapt" to the viewport.  Can I edit the breakpoints?  What are the breakpoints?  And why do they not seem to be working?  I would dig into the source code myself but it's minified :(

[Alex Gyoshev]

Hello Tim,

Each widget has a default way of resizing within containers, and that is part of their responsive design. For a good illustration on how to use the widgets in a responsive page, see the integration demo of Kendo UI and Twitter Bootstrap. In particular, changing the menu layout will still require you to set the responsive breakpoints manually.

Regards,
Alex Gyoshev
Telerik

[Tim]

Correct me if I'm wrong, but that's bootstrap providing the responsiveness in the menu for this example.  Does kendo's menu widget provide a method of making it responsive?

[Alex Gyoshev]

Hello Tom,

The "responsiveness" of the menu is provided by a media query, not by bootstrap:

@media (max-width: 767px) {
    .k-menu.k-menu-horizontal .k-item {
        float: none;
    }
}

The menu allows you to change its size gracefully via its em-sizing (if you change the font-size), if you want to make the links bigger on smaller.

If that is not what you expect, please elaborate where it falls short.

Regards,
Alex Gyoshev
Telerik

@media (max-width: 767px) {
    .k-menu.k-menu-horizontal .k-item {
        float: none;
    }

@media (max-width: 767px) {
    .k-menu.k-menu-horizontal .k-item {
        float: none;
    }