如何使我的 mailchimp 表单在桌面和移动设备上保持一致

Question

我正在使用 mailchimp 来管理我公司电子邮件列表的订阅者。 Mailchimp 提供可嵌入代码以用于嵌入网站。我正在使用 wordpress，主题是 Shopkeeper。

我的问题是，当我使用他们的代码时，输入字段会拉伸整个屏幕。它在移动设备上看起来不错，但在台式机上看起来就不是那么好了。我修改了代码，使文本输入字段的宽度为 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%

如何使我的 mailchimp 表单在桌面和移动设备上保持一致

How to make my mailchimp form be consistent across desktop & mobile

html

css

wordpress

mailchimp