https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment Gravity Support Forums Topic: Newsletter Signup Button Alignment en-US Mon, 20 Apr 2026 01:13:29 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment#post-211597 Tue, 16 Apr 2013 09:44:42 +0000 neuic 211597@https://legacy.forums.gravityhelp.com/ <p>So I went with this as the browsers and mobile do not seem to get along with each other. I would like the button beside the input field if its possible to make it work across all platforms. </p> <p>/* Gravity Forms<br /> ------------------------------------------------------------ */</p> <p>div.gform_wrapper input,<br /> div.gform_wrapper select,<br /> div.gform_wrapper textarea {<br /> -moz-box-shadow: 0 0 5px #bbb inset;<br /> -webkit-box-shadow: 0 0 5px #bbb inset;<br /> background-color: #fff;<br /> box-shadow: 0 0 5px #bbb inset;<br /> box-sizing: border-box !important;<br /> font-size: 14px !important;<br /> padding: 8px 5px !important;<br /> }</p> <p>body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"] {<br /> padding: 8px 15px !important;</p> <p>}</p> <p>div.gform_footer input.button {<br /> -moz-box-shadow: none;<br /> -webkit-box-shadow: none;<br /> box-shadow: none;<br /> color: #fff;<br /> width: 100%;<br /> padding: 8px 15px !important;<br /> }</p> <p>body .gform_wrapper {<br /> background-color: #f5f5f5;<br /> padding: 10%;<br /> } </p> https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment#post-211524 Tue, 16 Apr 2013 08:29:52 +0000 neuic 211524@https://legacy.forums.gravityhelp.com/ <p>Well, seems I can not win on mobile (iphone) it's really out of whack. </p> https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment#post-211521 Tue, 16 Apr 2013 08:27:13 +0000 neuic 211521@https://legacy.forums.gravityhelp.com/ <p>I changed the height to padding same as the input button seems to do the trick works in IE and Chrome will test safari/firefox later today. Oh and top is at 136px</p> <p>body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"] {<br /> padding: 8px 15px !important;<br /> margin-left: 60px;<br /> } </p> https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment#post-211498 Tue, 16 Apr 2013 08:07:20 +0000 neuic 211498@https://legacy.forums.gravityhelp.com/ <p>Yes, 135px works well for chrome but doesn't display right in safari, firefox and ie? </p> https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment#post-210800 Mon, 15 Apr 2013 22:08:16 +0000 David Peralty 210800@https://legacy.forums.gravityhelp.com/ <p>In Chrome on my Mac, I needed it to have a value of top: 135px; instead of 145. Seems like some kind of padding/pixel count issue? Not entirely sure. </p> https://legacy.forums.gravityhelp.com/topic/newsletter-signup-button-alignment#post-210705 Mon, 15 Apr 2013 21:10:03 +0000 neuic 210705@https://legacy.forums.gravityhelp.com/ <p>I've added a signup form on my posts and the button isnt aligning right on all browsers. Only works on safari. My code below and the form url: </p> <p><a href="http://www.jasonneuman.com/welcome-test/" rel="nofollow">http://www.jasonneuman.com/welcome-test/</a></p> <pre><code>[css] /* Gravity Forms ------------------------------------------------------------ */ div.gform_wrapper input, div.gform_wrapper select, div.gform_wrapper textarea { -moz-box-shadow: 0 0 5px #bbb inset; -webkit-box-shadow: 0 0 5px #bbb inset; background-color: #fff; box-shadow: 0 0 5px #bbb inset; box-sizing: border-box !important; font-size: 14px !important; padding: 4px 5px !important; } body .gform_wrapper .gform_body .gform_fields .gfield input[type=&quot;text&quot;] { height: 38px; margin-left: 55px; } body .gform_wrapper { background-color: #f5f5f5; padding: 10px; } div.gform_footer input.button { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; color: #fff; padding: 8px 15px !important; } div.gform_wrapper .ginput_complex label { font-size: 14px; } div.gform_wrapper li, div.gform_wrapper form li { margin: 0 0 10px; } div.gform_wrapper .gform_footer { border: none; margin: 0; padding: 0; } body #gform_wrapper_2 { position: relative; } body #gform_wrapper_2 div.validation_error { display:none } body #gform_wrapper_2 .gfield_error { width: 100%; border:none; } li#field_2_1 { padding-top:6px } li#field_2_1 input { width:66%; } body #gform_wrapper_2 .gform_footer { width: auto; position: absolute; top: 145px; left: 75%; padding: 0; margin: 0; } body #gform_wrapper_2 .gform_footer .gform_edit_link { display:none }</code></pre>