title: Responsive jquery-steps
body: <p>I'm attempting to implement jquery-steps and for the most part it is going well.  One issue I'm having is that the step tabs are not being fully responsive.</p>
  
  <p>I'm doing a horizontal implementation. They resize with the window, but they do not stack as they do in your example so eventually I wind up with some very small, unreadable step tabs.</p>
  
  <p>Unfortunately, all the examples on the developer site are on the same page, so trying to determine what css to use is a bit problematic.</p>
  
  <p>Any help would be appreciated:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/normalize.css" /&gt;
      &lt;link href="css/hwr.css" rel="stylesheet" media="screen" /&gt;
      &lt;link href="Content/jquery.steps.css" rel="stylesheet" /&gt;
      &lt;link href="Content/bootstrap.min.css" rel="stylesheet" /&gt;
  
      &lt;script src="Scripts/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery.cookie.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery.steps.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt;
  
  &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
  &lt;!--[if lt IE 9]&gt;
      &lt;script src="js/html5Shiv/html5shiv.js"&gt;&lt;/script&gt;
      &lt;script src="js/respond/respond.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  
  &lt;script type='text/javascript'&gt;
  
      $(document).ready(function () {
          $.validator.addMethod("postalCodeValid", function (validationPostalCode, element) {
              return (this.optional(element) || validationPostalCode.startsWith("85"));
              }, "You must be located in an '85' postal code to participate.");
  
  
          if (typeof String.prototype.startsWith != 'function') {
              String.prototype.startsWith = function (str) {
                  return this.slice(0, str.length) == str;
              };
          }
  
          function errorPlacement(error, element) {
              element.before(error);
  
              element.popover({
                  content: error.text(),
                  placement: function () {
                      return (element.parents(".content").width() &gt;= 550) ? "right" : "top";
                  },
                  trigger: "focus hover"
              });
  
              $(".popover-content", element.next(".popover")).empty().prepend(error);
          }
  
          $("#form").steps({
              headerTag: "h1",
              bodyTag: "fieldset",
              stepsOrientation: "horizontal",
              transitionEffect: $.fn.steps.transitionEffect.fade,
              transitionEffectSpeed: 400,
              onStepChanging: function (event, currentIndex, newIndex) {
                  // Always allow going backward even if the current step contains invalid fields!
                  if (currentIndex &gt; newIndex) {
                      return true;
                  }
  
                  if (currentIndex == 0) {
  
                  }
  
  
                  // Forbid suppressing "Warning" step if the user is to young
                  if (newIndex === 3 &amp;&amp; Number($("#age").val()) &lt; 18) {
                      return false;
                  }
  
                  var form = $(this);
  
                  // Clean up if user went backward before
                  if (currentIndex &lt; newIndex) {
                      // To remove error styles
                      $(".body:eq(" + newIndex + ") label.error", form).remove();
                      $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                  }
  
                  // Disable validation on fields that are disabled or hidden.
                  form.validate().settings.ignore = ":disabled,:hidden";
  
                  // Start validation; Prevent going forward if false
                     return form.valid();
              },
              onStepChanged: function (event, currentIndex, priorIndex) {
                  // Suppress (skip) "Warning" step if the user is old enough.
                  if (currentIndex === 2 &amp;&amp; Number($("#age").val()) &gt;= 18) {
                      $(this).steps("next");
                  }
  
                  // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                  if (currentIndex === 2 &amp;&amp; priorIndex === 3) {
                      $(this).steps("previous");
                  }
              },
              onFinishing: function (event, currentIndex) {
                  var form = $(this);
  
                  // Disable validation on fields that are disabled.
                  // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                  form.validate().settings.ignore = ":disabled";
  
                  // Start validation; Prevent form submission if false
                  return form.valid();
              },
              onFinished: function (event, currentIndex) {
                  var form = $(this);
  
                  // Submit form input
                  form.submit();
              }
          }).validate({
              errorPlacement: function (error, element) {
                  if (element.attr("name") == "isOfAge") {
                      error.insertAfter("#lblIsOfAge");
                  }
                  else {
                      error.insertBefore(element);
                  }
              },
              rules: {
                  confirm: {
                      equalTo: "#password"
                  },
                  isOfAge: {
                      equalTo: "#isOfAgeYes"
                  },
                  verifyPostalCode: {
                      minlength: 5,
                      number: true,
                      postalCodeValid: true
                  }
              },
                  messages: {
                      isOfAge: "You must be at least 21 to participate."
                  }
              })
          });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
              &lt;form id="form" action="#"&gt;
                  &lt;h1&gt;Eligibility&lt;/h1&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Eligibility Confirmation&lt;/legend&gt;
  
                      &lt;div style="width: 65%; font-size: larger; font-weight: bold;"&gt;
                          YOU MUST BE 21 OR OVER TO PARTICIPATE
                      &lt;/div&gt;
                      &lt;br /&gt;&lt;br /&gt;
                      &lt;label id="lblIsOfAge" style="color: red; font-size: larger; font-weight: bold;" for="isOfAge"&gt;Are you at least 21 years of age?&lt;/label&gt;
                      &lt;br /&gt;
                      &lt;label&gt;&lt;input type="radio" name="isOfAge" id="isOfAgeYes" value="yes" title="Yes" style="width: 40px;" /&gt; Yes&lt;/label&gt;
                      &lt;label&gt;&lt;input type="radio" name="isOfAge" id="isOfAgeNo" value="no" checked="checked" title="No" style="width: 40px;" /&gt; No&lt;/label&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
  
                      &lt;div style="width: 65%; font-size: larger; font-weight: bold;"&gt;
                          Please enter the zip code of your current location.
                      &lt;/div&gt;
                      &lt;br /&gt;
                      &lt;label for="verifyPostalCode"&gt;Current Zip Code *&lt;/label&gt;
                      &lt;input id="verifyPostalCode" name="verifyPostalCode" type="text" class="required" /&gt;
                      &lt;p&gt;(*) Mandatory&lt;/p&gt;
                  &lt;/fieldset&gt;
  
                  &lt;h1&gt;Profile&lt;/h1&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Profile Information&lt;/legend&gt;
  
                      &lt;label for="name"&gt;First name *&lt;/label&gt;
                      &lt;input id="name" name="name" type="text" class="required" /&gt;
                      &lt;label for="surname"&gt;Last name *&lt;/label&gt;
                      &lt;input id="surname" name="surname" type="text" class="required" /&gt;
                      &lt;label for="email"&gt;Email *&lt;/label&gt;
                      &lt;input id="email" name="email" type="text" class="required email" /&gt;
                      &lt;label for="address"&gt;Address&lt;/label&gt;
                      &lt;input id="address" name="address" type="text" /&gt;
                      &lt;label for="age"&gt;Age (The warning step will show up if age is less than 18) *&lt;/label&gt;
                      &lt;input id="age" name="age" type="text" class="required number" /&gt;
                      &lt;p&gt;(*) Mandatory&lt;/p&gt;
                  &lt;/fieldset&gt;
  
                  &lt;h1&gt;Payment&lt;/h1&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Payment Info &amp; Billing Address&lt;/legend&gt;
  
                  &lt;/fieldset&gt;
  
                  &lt;h1&gt;Tickets&lt;/h1&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Ticket specification&lt;/legend&gt;
  
                  &lt;/fieldset&gt;
  
                  &lt;h1&gt;Summary&lt;/h1&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Purcahse Summary and Approval&lt;/legend&gt;
  
                  &lt;/fieldset&gt;
  
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also, in jquery.steps.css I altered this:</p>
  
  <pre><code>.wizard &gt; .steps &gt; ul &gt; li
  {
      width: 25%;
  }
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>.wizard &gt; .steps &gt; ul &gt; li
  {
      width: 20%;
  }
  </code></pre>
  
  <p>to keep the 5th step in line.</p>
  
  <p>Thanks for any insights.</p>
  
  <p>JP</p>