입력란이 모바일에서 이상하게 작동합니다.

Question

2 개의 입력 필드가 나란히 정렬되었습니다. 데스크톱에서는 잘 작동하지만 모바일에서는 이상하게 작동합니다. 아래는 모바일에서 내 코드와 스크린 샷입니다. 누구든지 도움을 줄 수 있습니까? 미리 감사드립니다.

현재 작업에서 볼 수 있습니다 : (바닥 글에 상자가 문제가) 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

문제는에서 display:flex 함께 첫 번째 div. 이를 제거하면 정렬 문제가 해결됩니다.