Eingabefelder wirken auf mobile

Question

Ich habe 2 Eingabefelder nebeneinander ausgerichtet. Es funktioniert gut auf dem Desktop, aber auf Mobilgeräten agieren sie seltsam. Unten ist mein Code und der Screenshot auf dem Handy. Kann mir vielleicht jemand helfen? Danke im Voraus.

Sie können es in Aktion sehen hier: (die Box in der Fußzeile ist das Problem) https://www.wondercatspopup.com/hakkinda/

<div style="display:flex;"> 
 
    <p class="form-row form-row-first"> 
 
    <label style="display:none!important;" for="billing_first_name"><?php _e('First name', 'woocommerce'); ?><span class="required">*</span></label> 
 
    <input style="width: 130px; 
 
     display: inline-block; margin-right:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="İsim *" type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="<?php if (!empty($_POST['billing_first_name'])) esc_attr_e($_POST['billing_first_name']); ?>" 
 
    /> 
 

 

 
    <label style="display:none!important;" for="billing_last_name"><?php _e('Last name', 'woocommerce'); ?><span class="required">*</span></label> 
 
    <input style="width: 130px; 
 
     display: inline-block; margin-left:1px;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Soyisim *" type="text" class="input-text" name="billing_last_name" id="billing_last_name" value="<?php if (!empty($_POST['billing_last_name'])) esc_attr_e($_POST['billing_last_name']); ?>" 
 
    /> 
 
    </p> 
 
</div> 
 

 
<p style="margin-bottom: 0px; margin-top: 10px;" class="form-row form-row-wide"> 
 

 
    <label style="display:none!important;" for="reg_billing_phone"><?php _e('Phone', 'woocommerce'); ?></label> 
 
    <input style="width:274px!important;" type="text" class="woocommerce-Input woocommerce-Input--text input-text placeholder" placeholder="Cep Telefonu *" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e($_POST['billing_phone']); ?>" 
 
    /> 
 
</p><br> 
 

 
<div class="clear"></div>

Answer 1

Das Problem ist, mit dem display:flex bei der erste div. Entfernen Sie das und das Ausrichtungsproblem sollte behoben werden.