私のmailchimpフォームをデスクトップとモバイルで一貫性を持たせる方法

Question

私はmailchimpを使って私の会社の電子メールリストの購読者を管理しています。 Mailchimpは、Webサイトに埋め込むための埋め込み可能なコードを提供します。私はワードプレスを使用しており、テーマはショップキーパーです。

私の問題は、コードを使用すると入力フィールドが画面全体に広がってしまうことです。モバイルでもデスクトップではうまく見えます。テキスト入力フィールドの幅を50％にするようにコードを修正しましたが、入力フィールドはモバイルでは小さすぎます。私が何を意味するか参照するには、デスクトップとモバイルの両方で

チェックこのページを： https://www.californiabeardco.com/summer-giveaway/

どのように私は次のように、モバイルとデスクトップの両方に格好良い入力フィールドを持つように修正することができますか？

<center> 
<div id="mc_embed_signup"> 
<form action="//californiabeardco.us14.list-manage.com/subscribe/post?u=410a760d612d262807bb8eb57&amp;id=5d976982af" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <input type="email" value="email address" name="EMAIL" class="required email" id="mce-EMAIL" style="width:50%;"> 
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_410a760d612d262807bb8eb57_5d976982af" tabindex="-1" value=""></div> 
    <br /><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 

</form> 
</div> 
</center> 

Answer 1

@media screen and (max-width: 992px){ 
input#mce-EMAIL { 
width: 100%; 
} 
} 

これは992px 100％以下のデバイスと992px上記デバイス上の入力フィールドの幅が50％