CSS bootstrap: why does my page view differently in mobile browsers Chrome and Firefox

Question

Here is my code that will render an input field on screen:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ....
<div class="form-group ">
       <label class="col-xs-8 col-sm-4 col-md-5 col-lg-2 control-label" id="categoryLabel">Request *</label>
       <div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6">
             <select id="category" name="" class="form-control">
               //options
             </select>
        </div>
</div>

This looks perfect in a PC browser but after a client's feedback, i noticed that Firefox on android doesnt render it properly:

the class form-control has the following css:

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out     .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

The rest of the classes are all bootstrap v3.0.0 classes.

Any ideas on how i can make the firefox browser render like the chrome browser?

Thanks

Answer 1

Try changing grid for label.

<label class="col-xs-8 - change to <label class="col-xs-12