[Support request] Name field in the comment section isn’t appropriate.

[Naveen]

Hi, at the end of each blog post, in the comment section, the name field is not designed properly and it’s affecting my mobile view.

You can see the image i sent below:

https://snipboard.io/uCGBrv.jpg

Kindly help me with it.

[David]

Hi there,

can you share a link to a post where we can see this ?

[Naveen]

hi, You can find it in every page under blog post in the comment section.

If you see it from desktop, you will find the “Name” field is small when compared to the “email” and “Website”

and if you see it from mobile, you will find the “Name” field is larger when compared to the “email” and “Website”

especially in mobile it is causing an issue.

kindly help me with it.

[David]

Have you used any functions ore edited any theme files to change the ‘look’ of that input field ?

[Naveen]

NO. I didn’t do anything…
It was there from the beginning itself.

[Fernando]

Hi Naveen,

I see. There may be custom code which is altering the HTML structure of that specific field. With that said, can you try #1 here: https://docs.generatepress.com/article/debugging-tips/

Kindly let us know how it goes. 🙂

[Naveen]

HI, I tried all of the above mentioned tips. Still, the problem is same.

I want to inform you that, it used be the same problem when I was using a different then. However, when I approached my previous theme developers. They have provided a short code and asked me to place in the theme editor. Then the problem has solved.

Do you have any such codes. Maybe it works.

And want to know what exactly causing this issue? kindly let me know.

Thank you.

[David]

The bottom line is the HTML in that form field has been changed. It is not the default WordPress Comment Form HTML that GP uses.

This is the default HTML that the WordPress Comment Form outputs:

<input placeholder="Name *" id="author" name="author" type="text" value="" size="30" required="">

and this is the HTML on your site:

<input placeholder="Name *" id="author" name="author" size="30" required="">

You can see it is missing the type="text" attribute, which the Theme requires to add its styles.

There either has been:

a) an edit made to the themes files.
b) a custom function or plugin that is altering that HTML

If you cannot find that, then you can add this CSS to restyle your field

.comment-form #author {
    color: var(--contrast);
    background-color: var(--base-2);
    border-color: var(--base);
    border: 1px solid;
    border-radius: 0;
    padding: 10px 15px;
    max-width: 100%;
}

[Naveen]

Hi, where should I add the following code provided by you:

.comment-form #author {
color: var(–contrast);
background-color: var(–base-2);
border-color: var(–base);
border: 1px solid;
border-radius: 0;
padding: 10px 15px;
max-width: 100%;
}

Also, there is an existing code in additional CSS area.

So, where exactly should I place this extra code provided by you?

[Fernando]

Hi Naveen,

Yes, you are correct.

This CSS code should be added through Additional CSS.

Specifically, in Appearance > Customize > Additional CSS.

Reference: https://docs.generatepress.com/article/adding-css/#additional-css

You could place it below or above the existing code you already have.

Hope this clarifies. 🙂

[Naveen]

ok thanks it worked.

[Fernando]

You’re welcome Naveen! We’re glad to be of assistance! Feel free to reach out anytime if assistance with anything else is needed. 🙂

[Author]

Posts