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表单在桌面和桌面上保持一致移动

1 个答案: