Responsive Textbox jQuery mobile

Question

Ich habe Label und Textfeld in jQuery Mobile und wenn die Bildschirmgröße ändert sich die gesamte Struktur zu ändern.

Wenn ich Bildschirmgröße Breite weniger als 448px habe, geht es zu Label und Textbox unter dem Etikett, aber wenn es über 447px ist es eins neben dem anderen.

Ich füge zwei Fotos hinzu, um klar zu sein.

Dies ist der 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; 
} 

Gibt es irgendeinen Weg durch CSS, es zu überschreiben und in jeder Bildschirmgröße immer nebeneinander zu stehen?

Answer 1

Sie müssen nur Stil-Label als Block auf kleinen Bildschirmen

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