My CSS on my button is different from desktop to mobile?

Question

I'm trying to figure out why my CSS changes on my button when viewed on an iPhone, or any mobile device; however, it looks fine on desktop and even when I re-size my window. My styles on my button is different from the styles I have on desktop. I even viewed this on mobile in different internet browsers. Help? Here is the website. http://matthew.myspanishslang.com/

<h1 id="contact-us">Let us know something!</h1>
<form class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name">
    <input type="email" id="input-email" placeholder="Email address">
    <input type="text" id="input-subject" placeholder="Subject">
  </div>
  <div class="half right cf">
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
  </div>
  <input type="submit" value="Submit" id="input-submit">
</form>

and my CSS

#contact-us {
  font-size: 1.0em;
  text-align: center;
  color: #a8a8a8;
  text-shadow: 1px 1px 0 white;
}
form {
  background: #f1f1f1;
  padding: 1em;
  max-width: 600px;
  text-align: center;
  margin: 20px auto;
}
form input, form textarea {
  border: 0;
  outline: 0;
  padding: 1em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 1em;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  resize: none;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}
form #input-submit {
  color: white;
  background: #e74c3c;
  cursor: pointer;
}
form #input-submit:hover {
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}
form textarea {
  height: 126px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}

@media only screen and (max-width: 725px) {
  form input, form textarea {
    width: 70%;
  }
}

@media (max-width: 480px) {
  .half {
    width: 100%;
    float: none;
    margin-bottom: 0;
  }
}
/* Clearfix */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

score 0 · Accepted Answer · answered Mar 20 '18 at 12:08

0

If your problem is that iOS replace your button style by one of its own, you probably should consider to add the following line to your code, as suggested in this post I found.

-webkit-appearance: none;

CSS submit button weird rendering on iPad/iPhone

answered Mar 20 '18 at 12:08

Charles.C

345
1
3
12

Thanks so much! This really helped me and it worked! I've been banging my hand over this for a while. God bless you, sir. – Kasador Mar 28 '18 at 01:56

My CSS on my button is different from desktop to mobile?

1 Answers1