Adjusting the submit button padding in mobile [RESOLVED]

Get Help
, ,
1

Hi all,

Here’re several goals I want to achieve for our sign up form on this page: https://www.advantiahealth.com/testhh14850/

  1. Make the entire form centered
  2. Make the input fields and submit button the same height

I’ve been adding custom css to adjust the styling, but I have this problem right now: I’m not sure how to change the padding of the submit button on mobile. Currently the bottom padding looks a bit off.

Here’s the css I have:

/* Submit Button Gravity Forms
-----------------------------*/
body .gform_wrapper .gform_footer input[type=submit] {
color: #FFFFFF;
background: #7dced0;
font-size: 20px;
letter-spacing: 1px;
height: 30px;
min-width: 150px;
border: none;
border-radius: 30px;
transition: 0.3s;
}

body .gform_wrapper .gform_footer input:hover[type=submit] {
background: #94d3d3;
}

	body .gform_wrapper .gform_footer input[type=submit] {padding-top:7px;
padding-bottom:7px;	}

/* hide form title
-----------------------------*/
body .gform_wrapper h3.gform_title {
    display: none !important;
}



/* form input field container padding */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {padding-bottom:8px;}


@media only screen and (min-width: 641px) {
 body #gform_wrapper_1 { 
margin: 0 auto; text-align: center; width:60%;
 }
	
}

Can someone help me to take a look at this? Thank you in advance!!

2

For mobile button add this:

@media only screen and (max-width: 667px)  {
    body .gform_wrapper .gform_footer input[type=submit] {
        height: 40px; 
        padding-top: 0px !important; 
        padding-bottom: 0px !important;
    }
}

Regarding centering the entire form. Can you explain this because just briefly glancing at your page the form looks to be centered.

1 Like
3

Thank you so much!! It’s working now!

No worries about the centering. I think it’s working fine:)

2 Likes