<div class="entry-content" style="width:40%; margin-top: 20px; ">

<p><label> 이름 (필수)<br/>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"/></span> </label></p>
<p><label> 이메일 (필수)<br/>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"/></span> </label></p>
<p><label> 제목<br/>
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"/></span> </label></p>
<p><label> 메시지<br/>
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="보내기" class="wpcf7-form-control wpcf7-submit"/></p>

</div>

위의 <div> 태그안의 폼박스는 화면의 중간에 보여지고 있습니다.

그런데 모바일에서 보여지는 경우 반응형으로 폭이 줄어들게 되면 width가 40%로 지정이 되어 있어서인지 화면이 좁은 모바일에서도 40%폭으로 보여서 가운데에서 폭이 아주 작은 박스가 됩니다.

지난번에 링크해 주신 아래의 [mystatus] 숏코드 페이지의 폼박스를 보면 pc 에서 볼때는 40% 정도 폭으로 보이지만 반응형으로 잘 작동되어 모바일에서 볼때는 약 90% 폭으로 충분히 넓게 보입니다.

이 문제를 어떻게 해결해야 할까요? 조언 부탁드립니다.

http://biscuitpress.kr/503