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">
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