CSS for error message

On our homepage, there’s a form, filling up which should give you an error message. The error message shows up oddly. We are trying to write some CSS to make it smaller, fit inside the box and be on a red box background. But it is not having an effect. Please advice.

  • Adam Czajczyk
    • Support Gorilla

    Hi admin

    I hope you’re well today!

    It can be made “better” using following CSS:

    .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
        display: block;
        width: 100%;
        padding: 10px!important;
        background: red;
        font-size: 0.7em;
        overflow: hidden;
        word-wrap: normal!important;
        height: auto;

    It’s still not the “end result”, though. It seems that there’s still something “stubbornly” interfering and I wasn’t yet able to find out exactly what it is.

    Since you have already attempted to style the form in some custom way, is there currently any custom CSS applied that’s meant to address that validation message and if so – where can I find it via site’s back-end (e.g. “Appearance -> Customize -> Additional CSS”:wink:? Or could you possibly remove it entirely (just keep the copy in case you needed to add it back)?

    Let me know, please, and I’ll work on it more.

    Kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.