Label "Message" overlaping with input content

1

Hello,

I would appreciate if someone can give me a hand with the following issue in my portfolio project:

It is about the “Message” field in the “Contact me” block, the last part. As you can see, if something is typed in the Name, Email or Phone fields, the labels remain upward, however, when I type something in the Message field, the label “Message” goes down and overlaps with the text written. I have been re-reading the different CSS instances that controls this change but still do not find where is the mistake.

My html code involved in this part starts at line 49, and the CSS code starts at line 89. Thanks in advance.!

https://codepen.io/rcnavarrop/full/MvzwPB

Renzo

2

Hey, at line 148 of your CSS you probably wrote “input” by mistake:

textarea:focus ~ label, input:valid ~ label {

should be

textarea:focus ~ label, textarea:valid ~ label {
1 Like
3

Just saw that too. Nice one @noyb

1 Like
4

What an embarrassing mistake :sweat: Thanks so much for your help and your time @noyb