title: Need help in making this input form responsive
body: <p>I want to make this form responsive. I have added Bootstrap but it doesn’t seem to work. I have added this code on a webpage and checked the same on mobile: the form elements are messed up.</p>
  
  <p>Could somebody provide specific help pointers please?</p>
  
  <p>Here is my working code:</p>
  
  <p><a href="https://codepen.io/mohdahmed/pen/jaOOwb" rel="nofollow noreferrer">https://codepen.io/mohdahmed/pen/jaOOwb</a></p>
  
  <p>here is the corresponding HTML and CSS copied from my CodePen:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mc-container {
    width: 70%;
  }
  
  ul.mc-ul {
    list-style-type: none;
    padding: 0;
  }
  
  .mc-left {
    float: left;
    width: 20%;
  }
  
  .mc-right {
    float: left;
    margin-left: 5%;
    width: 75%;
  }
  
  #mc-height-weight .input-group {
    width: 1px;
    padding-right: 10px;
  }
  
  #mc-height-weight input {
    width: 120px;
  }
  
  #mc-age .input-group,
  #mc-body-fat .input-group,
  #mc-deficit-surplus .mc-d-s-right .input-group,
  #mc-carbs .input-group,
  #mc-protein .input-group {
    width: 1px;
  }
  
  #mc-age input,
  #mc-body-fat input,
  #mc-deficit-surplus .mc-d-s-right input,
  #mc-carbs input,
  #mc-protein input {
    width: 90px;
  }
  
  #mc-d-s-radio {
    list-style-type: none;
    padding: 0;
  }
  
  #mc-maint-cals,
  #mc-bf-est {
    font-weight: bold;
    background-color: #ddd;
    display: inline-block;
    *display: inline; /* for IE7*/
    *zoom: 1; /* for IE7*/
    min-width: 30px;
    padding: 0 4px 0 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mc-container"&gt;
    &lt;form id="mc-data" action="get" autocomplete="off" method="post" name="mc-data"&gt;
      &lt;ul class="mc-ul"&gt;
        &lt;li id="mc-unit-type"&gt;
          &lt;div class="mc-left"&gt;
            Preferred Units
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;label for="mc-u-met" class="radio-inline"&gt;&lt;input type="radio" id="mc-u-met" name="units" value="metric"&gt;
                  Metric&lt;/label&gt;
            &lt;label for="mc-u-imp" class="radio-inline"&gt;
                  &lt;input type="radio" id="mc-u-imp" name="units" value="imperial" checked="checked"&gt;
                  Imperial&lt;/label&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-gender"&gt;
          &lt;div class="mc-left"&gt;
            Gender
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;label for="mc-is-male" class="radio-inline"&gt;&lt;input type="radio" id="mc-is-male" name="gender" value="male"&gt;
                Male&lt;/label&gt;
            &lt;label for="mc-is-female" class="radio-inline"&gt;
                &lt;input type="radio" id="mc-is-female" name="gender" value="female"&gt;
                Female&lt;/label&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-height-weight"&gt;
          &lt;div class="mc-left"&gt;
            Height &amp; Weight
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;div id="mc-met-container" class="form-inline"&gt;
              &lt;div class="form-group form-group-lg"&gt;
                &lt;div class="input-group"&gt;
                  &lt;input type="number" id="mc-h-cm" name="mc-h-w" placeholder="0" class="form-control"&gt;
                  &lt;div class="input-group-addon"&gt;cm&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="input-group"&gt;
                  &lt;input type="number" id="mc-w-kgs" name="mc-h-w" placeholder="0" class="form-control"&gt;
                  &lt;div class="input-group-addon"&gt;kgs&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="mc-imp-container" class="form-inline"&gt;
              &lt;div class="form-group form-group-lg"&gt;
                &lt;div class='input-group'&gt;
                  &lt;input type="number" id="mc-h-ft" name="mc-h-w" placeholder="0" class="form-control"&gt;
                  &lt;div class="input-group-addon"&gt;ft&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="input-group"&gt;
                  &lt;input type="number" id="mc-h-in" name="mc-h-w" placeholder="0" class="form-control"&gt;
                  &lt;div class="input-group-addon"&gt;in&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="input-group"&gt;
                  &lt;input type="number" id="mc-w-lbs" name="mc-h-w" placeholder="0" class="form-control"&gt;
                  &lt;div class="input-group-addon"&gt;lbs&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-age"&gt;
          &lt;div class="mc-left"&gt;Age&lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;div class="form-group form-group-lg"&gt;
              &lt;div class="input-group"&gt;
                &lt;input type="number" id="mc-age" name="age" placeholder="0" class="form-control"&gt;
                &lt;div class="input-group-addon"&gt;years old&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-body-fat"&gt;
          &lt;div class="mc-left"&gt;
            Body Fat Percentage
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;div&gt;
              &lt;p&gt;Based on the information you have provided, we estimate your body fat to be around &lt;span id="mc-bf-est"&gt;%&lt;/span&gt;.&lt;/p&gt;
              &lt;p&gt;The above is only an estimate, for best results use a DEXA Machine or skin-fold calipers to determine your body fat percentage.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="form-group form-group-lg"&gt;
              &lt;div class="input-group"&gt;
                &lt;input type="number" id="mc-fat" name="fat" placeholder="0" class="form-control"&gt;
                &lt;div class="input-group-addon"&gt;% body fat&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-activity"&gt;
          &lt;div class="mc-left"&gt;
            Acivity Level
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;ul class="mc-ul"&gt;
              &lt;li&gt;&lt;label for="mc-al-sed"&gt;&lt;input type="radio" id="mc-al-sed" name="activity-level" value="sedentary" checked="checked"&gt;Sedentary&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;label for="mc-al-lt"&gt;&lt;input type="radio" id="mc-al-lt" name="activity-level" value="lt-act"&gt;Lightly Active&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;label for="mc-al-md"&gt;&lt;input type="radio" id="mc-al-md" name="activity-level" value="mod-act"&gt;Moderately Active&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;label for="mc-al-va"&gt;&lt;input type="radio" id="mc-al-va" name="activity-level" value="very-act"&gt;Very Active&lt;/label&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-deficit-surplus"&gt;
          &lt;div class="mc-left"&gt;
            Caloric Deficit/Surplus
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;div&gt;
              &lt;p&gt;According to the information you provided, you burn about &lt;span id="mc-maint-cals"&gt;&amp;nbsp;&lt;/span&gt; calories daily.&lt;/p&gt;
              &lt;p&gt;In order to lose weight, you will need to be below that figure (deficit). In order to gain weight or muscle, you will need to be above that figure (surplus). If you're happy where you're at, select maintain.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="mc-left"&gt;
              &lt;ul id="mc-d-s-radio"&gt;
                &lt;li&gt;&lt;label for="mc-deficit"&gt;&lt;input type="radio" id="mc-deficit" name="mc-d-s" value="deficit"&gt;Deficit&lt;/label&gt;&lt;/li&gt;
                &lt;li&gt;&lt;label for="mc-maint"&gt;&lt;input type="radio" id="mc-maint" name="mc-d-s" value="maintenance"&gt;Maintenance&lt;/label&gt;&lt;/li&gt;
                &lt;li&gt;&lt;label for="mc-surplus"&gt;&lt;input type="radio" id="mc-surplus" name="mc-d-s" value="surplus"&gt;Surplus&lt;/label&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="mc-right mc-d-s-right"&gt;
              &lt;div class="form-group form-group-lg"&gt;
                &lt;div class="input-group"&gt;
                  &lt;input type="number" name="mc-d-s" placeholder="0" class="form-control"&gt;
                  &lt;div class="input-group-addon"&gt;%&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-carbs"&gt;
          &lt;div class="mc-left"&gt;
            Total Carbs
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;p&gt;On a Ketogenic diet, the optimal range of carbohydrate intake is 5% or less of your total intake, which usually equates to 20g of Net Carbs. Adjust to your liking, but going above 20g of carbs will depreciate your results.&lt;/p&gt;
            &lt;div class="form-group form-group-lg"&gt;
              &lt;div class="input-group"&gt;
                &lt;div class="input-group-addon"&gt;Carbs&lt;/div&gt;
                &lt;input type="number" id="mc-carbs-input" name="carbs" placeholder="0" class="form-control" value="20"&gt;
                &lt;div class="input-group-addon"&gt;g&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-protein"&gt;
          &lt;div class="mc-left"&gt;
            Total Protein
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;p&gt;Protein consumption should be limited as consuming too much can lead to slower weight loss and even kicking you out of ketosis.&lt;/p&gt;
            &lt;div class="form-group form-group-lg"&gt;
              &lt;div class="input-group"&gt;
                &lt;div class="input-group-addon"&gt;Protein&lt;/div&gt;
                &lt;input type="number" id="mc-carbs-input" name="carbs" placeholder="0" class="form-control" value="0.6"&gt;
                &lt;div class="input-group-addon"&gt;g / lb Lean Body Mass&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="mc-macros-output"&gt;
          &lt;div class="mc-left"&gt;
            Your Daily Macronutrients
          &lt;/div&gt;
          &lt;div class="mc-right"&gt;
            &lt;div class="progress"&gt;
              &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%"&gt;
                &lt;span id="mc-macros-cals"&gt;&lt;/span&gt; calories
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="progress"&gt;
              &lt;div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"&gt;
                &lt;span id="mc-macros-fat"&gt;&lt;/span&gt; g fats
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="progress"&gt;
              &lt;div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:50%"&gt;
                &lt;span id="mc-macros-protein"&gt;&lt;/span&gt; g protein
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="progress"&gt;
              &lt;div class="progress-bar progress-bar-striped progress-bar-warning active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:10%"&gt;
                &lt;span id="mc-macros-protein"&gt;20&lt;/span&gt; g carbs
              &lt;/div&gt;
              &lt;span id="mc-macros-protein"&gt;20&lt;/span&gt; g carbs
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>