- This topic is empty.
-
AuthorPosts
-
September 15, 2014 at 7:33 pm #183197caseydennisonParticipant
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.
September 15, 2014 at 8:31 pm #183204__ParticipantAs you can see the email field is wider than the subscribe button.
That’s because the width of the text input is measured from the edges of its content area, while the width of the submit input is measured from its borders.
Learn about
box-sizing
.September 16, 2014 at 7:15 am #183251caseydennisonParticipantAh, so simple. I had no idea it had anything to do with this. Thanks a ton man!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.