How to make this code responsive? Plz help!

Hi guys!
I am having some trouble trying to figure out how would I make this code responsive? It works on desktop. I have put this code on a webpage but it does not seem to work on mobiles… The alignments are messed up. Already using bootstrap. Should I change px into %?

Here is the pen: https://codepen.io/mohdahmed/pen/jaOOwb

Thanks a lot!

1 Like

add this in your <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

You might want to read this: https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

If you’re using bootstrap, you should be using bootstrap’s rows and cols classes instead of trying to create your own grid system.

e.g.

      <li id="mc-unit-type">
        <div class="row">
          <div class="col-xs-6 col-md-3">
            Preferred Units
          </div>
          <div class="col-xs-6 col-md-9">
              <label for="mc-u-met" class="radio-inline"><input type="radio" id="mc-u-met" name="units" value="metric">
              Metric</label>
              <label for="mc-u-imp" class="radio-inline">
              <input type="radio" id="mc-u-imp" name="units" value="imperial" checked="checked">
              Imperial</label>
          </div>
        </div>
      </li>

You should also use bootstrap’s container or container-fluid class instead of mc-container.

1 Like