PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Newsletter Signup Button Alignment

  1. 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:

    http://www.jasonneuman.com/welcome-test/

    [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="text"] {
    	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
    }
    Posted 6 years ago on Tuesday April 16, 2013 | Permalink
  2. David Peralty
    Administrator

    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.

    Posted 6 years ago on Tuesday April 16, 2013 | Permalink
  3. Yes, 135px works well for chrome but doesn't display right in safari, firefox and ie?

    Posted 6 years ago on Tuesday April 16, 2013 | Permalink
  4. 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

    body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"] {
    padding: 8px 15px !important;
    margin-left: 60px;
    }

    Posted 6 years ago on Tuesday April 16, 2013 | Permalink
  5. Well, seems I can not win on mobile (iphone) it's really out of whack.

    Posted 6 years ago on Tuesday April 16, 2013 | Permalink
  6. 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.

    /* 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: 8px 5px !important;
    }

    body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"] {
    padding: 8px 15px !important;

    }

    div.gform_footer input.button {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    width: 100%;
    padding: 8px 15px !important;
    }

    body .gform_wrapper {
    background-color: #f5f5f5;
    padding: 10%;
    }

    Posted 6 years ago on Tuesday April 16, 2013 | Permalink