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

【问题标题】：How to make my mailchimp form be consistent across desktop & mobile如何使我的 mailchimp 表单在桌面和移动设备上保持一致
【发布时间】：2018-01-12 23:58:51
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html css wordpress mailchimp

【解决方案1】：

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

这将使 992 像素以下设备上的输入字段宽度为 100%，992 像素以上设备上的输入字段宽度为 50%

【讨论】：

我在wordpress的“外观”部分的“自定义代码”部分添加了该代码，但移动端的输入字段还是一样
我明白了！您可以尝试将“！important”添加到宽度。例如：input#mce-EMAIL { 宽度：100% !important; }
完美，在移动设备和桌面设备上看起来都很棒。谢谢！