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:

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:

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


      <li id="mc-unit-type">
        <div class="row">
          <div class="col-xs-6 col-md-3">
            Preferred Units
          <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">
              <label for="mc-u-imp" class="radio-inline">
              <input type="radio" id="mc-u-imp" name="units" value="imperial" checked="checked">

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

1 Like