Forums

Ok, here’s the deal: I’ve created an opt-in form using a text widget in a child theme of the WordPress twenty twelve theme. But for some reason, when I set the width of the email field and subscribe button to 100% width they do not match up on when viewed on a mobile device (at least mine anyways). Here is an example:

As you can see the email field is wider than the subscribe button.

Here is the css and html:

<form id="mail-list" method="post" action="//twitter.us9.list-manage.com/subscribe/post?u=71e93c84ad1aef1c0dea9b62a&id=4ab5575c75" name="mc-embedded-subscribe-form" novalidate>
<fieldset>

<input id="email-input" type="email" name="EMAIL" placeholder="Your Email Here" required>

<input type="submit" class="submit-bttn" value="GIVE ME THE UPDATES" name="subscribe" />

</fieldset>
</form>

#text-3 #mail-list {
        margin-top: 10px;
}
#text-3 #email-input {
        padding: 10px;
        background: #F0F2F1;
        border-radius: 0;
        border: 0;
        width: 100%;
}
#text-3 .submit-bttn {
         padding: 10px;
         margin-top: 10px;
         display: block;
         width: 100%;
         border: 0;
         border-radius: 0;
         background: #F49631;
         color: #fff;
}
#text-3 .submit-bttn:hover {
         color: #000;
}

I’m honestly not sure what the problem is. It displays fine on desktop monitors.

Any pointers would be greatly appreciated.