Remove feint border around input (mobile)

user_18518130 0
Viewed 26

Hello everybody & anybody who stumbles upon this!

I have ran into an issue where only on mobile devices there appears to be a feint border around my input tags elements. This happens in safari & google chrome on mobile. This does not happen in live server locally. It looks like its trying to create a border-radius: 20px around my input elements but in the css styling for desktop I don't even have that styling applied.

I have tried directly reapplying the desired styling in the mobile media query but everything I have tried has not worked so far.

Thank you in advance!! (p.s really sorry for the way the snippet is compiled, this was written using sass/scss.)

mobile: bug as described

mobile: bug as described - zoom spam breaking

html, body {
  font-family: 'mitr', sans-serif;
}

#contact {
  background-color: rgba(66, 76, 96, 0.8);
  padding: 2rem;
}

#contact .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#contact .container .contact-title h1 {
  color: #a3bfd9;
  font-size: 4rem;
  font-weight: 600;
  text-align: center;
}

#contact .container .contact-title p {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 300;
}

#contact .container .contact-title p a {
  color: #a3bfd9;
  text-decoration: underline;
}

#contact .container .form form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#contact .container .form form input {
  border: none;
  border-bottom: 3px #fff solid;
  background: transparent;
  color: #fff;
  margin: 3rem 0;
  padding: 0.5rem 0;
  width: 600px;
  font-size: 1.2rem;
  font-weight: 500;
}

#contact .container .form form input::placeholder {
  color: #fff;
}

#contact .container .form form input:focus {
  outline: none;
}

#contact .container .form form button {
  color: #fff;
  background-color: #2675a6;
  border: none;
  border-radius: 50px;
  padding: 1.5rem;
  width: 250px;
  font-size: 1.3rem;
}

#contact .container .form form button i {
  position: relative;
  margin-right: 0.5rem;
}

#contact .container .form form button:hover {
  background-color: #a3bfd9;
  color: #283040;
}
<section id="contact">
  <div class="container">
    <div class="contact-title">
      <h1>Lets Chat</h1>
      <p>Alternatively, you can reach out to me via <a href="#" target="_blank">Linkedin</a></p>
    </div>

    <div class="form">
      <form action="https://formsubmit.co/your@email.com" method="POST">
        <input type="text" name="name" required placeholder="name">
        <input type="email" name="email" required placeholder="email">
        <input type="text" name="message" required placeholder="message">
        <button type="submit"><i class="fas fa-paper-plane"></i>Send</button>
      </form>
    </div>
  </div>
</section>

css html
1 Answers

i fixed it.. really happy I figured it out on my own!! little stuff like this, although trivial make me doubt my skills (i've only been working with html & css for 3 months). super simple, and disappointed that i actual wrote this question up but i won't delete it. i'll leave it up to remind myself to experiment just a little bit more before i ask for help.

changing border-radius: none to border-radius: 0; within my media query fixed it.

.form {
  form {
    input {
      width: 300px;
      font-size: 17px;
      border-bottom: 3px solid #fff;
      border-radius: 0;
    }
    button {
      padding: 1rem;
      font-size: 16px;
    }
  }
}

user_185181300
Related