Responsive text box jQuery mobile

Question

I have label and text box in jQuery mobile and when the screen size changes the whole structure changes too.

When i have screen size width less then 448px it goes to label and text box under the label but when it is above 447px it is one next to the other.

I am adding two photos in order to be clear.

This is the code:

Html:

<div role="main" class="ui-content">
        <form>
            <div class="ui-field-contain">
                 <label for="sales1">Sales:</label>
                 <input type="text" id="sales" value="">
            </div>
</form>
</div>

Css:

.ui-field-contain .ui-input-text {
  width: 50% !important;
}

Is there any way by css to override it and to be always one next to the other in any screen size?

Answer 1

You just have to style label as an block on small screens

@media (max-width: 448px) {
  .ui-field-contain label {
    display: block;
  }
}