Send Message Button Looks Different on Mobile Devices

Hello! What CSS code do I need to add to make the Send Message button of the Lead Capture Form look uniform on a mobile device ? I customized the heading and the button of my form to a yellow color. It looks perfect when using a computer, but not when I'm using my iPhone or my iPad. See attached...thanks!

 

Do let us know your website link.

 

Hi! It's http://utmostorganizing.com thanks!

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.signupForm .signinForm input[type="submit"]:hover {
background: #db9704;
    width:auto;
    height:35px;
}
 
.signupForm .signinForm input[type="submit"]{
background: #db9704;
text-shadow: 0 1px 0 #CFCECE;
border-radius: 5px;
margin-top:5px;
    margin-bottom:0px;
    display:inline-block;
    font-family: 'Arvo', serif;
    font-size: 12px;
    text-decoration: none;
    padding:5px 5px 5px 8px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: solid #ed7a37 1px;
      width:auto;
    overflow:hidden;
      margin-bottom:20px;
      text-align:center;
      height:35px;
}

 

Thanks for the reply, but the button didn't look right on a computer monitor this time.

 

Hello Cagr,
Remove the width and height code given in the above reply by Nitesh, from the Custom CSS
(Appearance > Theme Option > Styling Option > Custom CSS).
for the reference see the image given below.

and now, paste the code given below in the Custom CSS.

Code:

.signupForm .signinForm input[type="submit"] {
 
padding-bottom: 0px ! important;
 
}

This will solve your issue.

 

The button is still not looking uniform. It's okay, I'll just leave it as is. Thanks anyways for the support