Skip to content

Form validation error message positioned incorrectly, overlapping with other content #9

@CodingJesse

Description

@CodingJesse

Form validation error messages are positioned too low due to excessive top margin on the .error class, causing them to overlap with content from other elements below the form field, making the error text unreadable.

Image
  • Environment
    Chrome 140.0.7339.128,
    Screen: 3840x2160

-To Reproduce
Go to the contact form
Fill in a field (e.g. name or timeline expectation) and then clear the text
The error message appears but overlaps with the title of the field below it

-Possible cause
In components/hubspot/input-fields/input-fields.module.scss, the .error class seems to have too much margin-top

.error {
  margin-top: mobile-vw(72px);
  @include desktop {
    margin-top: desktop-vw(95px);
  }
}

When I reduce the margin by about 1vw in dev tools, the error becomes visible and properly positioned.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions