Hey @dusanlukic404 lovely job here! 👍- Bit of a tricky one this for sure! Here's some thoughts and suggestions:
-
On small viewports the padding on
.tryit
class seems to be forcing the text to wrap a lot. I think you could just remove it or lower it down from 10em? -
In order to stop the layout shift when there's a validation error, I would suggest using
visibility: hidden
rather thandisplay: none
for the error text. This keeps the element's place in the DOM, where asdisplay: none
removes it completly. -
I would suggest adding the
novaldiate
attribute to the form and then removing it with JS. This will allow you to use the built in browser validation as fallback in case anything goes wrong. You have all the input types nicely sorted so you can enjoy this nice HTML feature!
Nice one and keep up the good work!!
Cheers 👋 Dave
Marked as helpful
@dusanlukic404
Posted
@dwhenson thanks Dave 😀