-2

On the login page there are font awesome icons in front of the input fields. In order to have a nice box border around both, I applied border property for both the icon and input field and removed the border-right and border-left respectively, so that it looks like a single box.

The issue I am facing now is when I switch to a mobile view, the border overlapping of both is clearly visible (please see the screenshot), but the desktop version looks good.
enter image description here

How can I resolve this border overlapping on mobile view?

user5664615
  • 400
  • 1
  • 10
  • 17
Rahul
  • 702
  • 2
  • 8
  • 26

1 Answers1

2

I suggest putting both inside a div with border styling and disabling the border of the icon and the input.

Pang
  • 9,564
  • 146
  • 81
  • 122
Sedky A
  • 184
  • 2
  • 15