Checked the display on mobile and noticed that there is an extra border in the forms. I attached an example for the input, only the lower border is registered, but on the mobile it substitutes it is visible on the screen. Tell me how to fix attach css code

input background-color: transparent border: none outline: none border-bottom: 1px solid #fff transition: all 0.3s ease-in-out padding-left: 30px padding-bottom: 10px padding-right: 30px margin-bottom: 25px color: #fff &::-webkit-input-placeholder color: #fff &::-moz-placeholder color: #fff &:-moz-placeholder color: #fff &:-ms-input-placeholder color: #fff &:focus, &:hover border-bottom: 1px solid $accent

enter image description here

  • Alternatively, try instead of border: none, register border: 1px solid transparent; - Alexey
  • yes, it worked something I didn’t immediately think that I could try it that way, I rewrote many styles, thank you very much - dmitro_bolva

1 answer 1

Alternatively, try instead of border:none; write border:1px solid transparent;