title: KendoUI MVC How to make controls responsive
body: <p>I have a simple page with some controls like text box, dropdown list and a grid, this is the code:</p>
  
  <pre><code>&lt;div id="order"&gt;
  &lt;p&gt;Create Order&lt;/p&gt;
  &lt;ul id="fieldlist"&gt;
      &lt;li&gt;
          &lt;label for="client"&gt;Client:&lt;/label&gt;
          @(Html.Kendo().TextBox()
              .Name("client")
              .Enable(false)
              .Value(@Model.ClientId.ToString() + " - " + @Model.Client)
              .HtmlAttributes(new { style = "width: 100%" })
          )
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for="date"&gt;Date:&lt;/label&gt;
          @(Html.Kendo().TextBox()
              .Name("date")
              .Value(@DateTime.Now.ToShortDateString())
              .HtmlAttributes(new { style = "width: 100%" })
          )
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for="address"&gt;Address:&lt;/label&gt;
          @(Html.Kendo().DropDownList()
              .Name("address")
              .DataTextField("Name")
              .DataValueField("AddressId")
              .BindTo(@Model.Addresses)
              .Value(@Model.MainAddress.ToString())
              .HtmlAttributes(new { style = "width: 100%" })
          )
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for="items"&gt;Items:&lt;/label&gt;
          @(Html.Kendo().Grid(Model.Detail)
              .Name("items")                
              .Columns(columns =&gt;
              {
                  columns.Bound(a =&gt; a.ItemId);
                  columns.Bound(a =&gt; a.Name).Width(200);
                  columns.Bound(a =&gt; a.Price).HtmlAttributes(new { style = "text-align:right" }).Width(100);
                  columns.Bound(a =&gt; a.Quantity).HtmlAttributes(new { style = "text-align:right" }).Width(100);
              })
              .ToolBar(toolBar =&gt;
              {
                  toolBar.Save().SaveText("Send Order");
              })
              .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
              .Scrollable()
              .Pageable(pageable =&gt; pageable
                  .ButtonCount(5)
              )
              .Resizable(resize =&gt; resize.Columns(true))
              .HtmlAttributes(new { style = "height:550px;" })
              .DataSource(datasource =&gt; datasource
                  .Ajax()
                  .Batch(true)
                  .PageSize(30)
                  .ServerOperation(false)
                  .Model(model =&gt;
                  {
                      model.Id(a =&gt; a.ItemId);
                      model.Field(a =&gt; a.Name).Editable(false);
                      model.Field(a =&gt; a.Price).Editable(false);
                      model.Field(a =&gt; a.Quantity);
                  })
                  .Update(update =&gt; update.Action("SendOrder", "Orders"))
          ))
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'd like to know how can I make this page responsive on different screens or devices.
  I took a look at the <a href="http://demos.telerik.com/aspnet-mvc/" rel="nofollow" title="Telerik demos page">telerik demos page</a> on my phone and the pages and controls adjusts to the size of the screen.</p>
  
  <p>I created the project using the template Telerik C# MVC Web Application, so I have all the scripts and everything, I just don't know which classes or styles should I apply to have that behavior. </p>