[Resolved] Strange Changes in Comment Section

[Usman]

Hey there, recently I make changes to my site including cache, and DNS. After this, I am seeing some design changes in the comment section.

The name box is no more responsive which is causing problems on mobile devices. I am adding screenshots.

Desktop SS: https://drive.google.com/file/d/1Ej_jnD9QigQWRDSCKBoZJx7WSpbYM5hy/view?usp=sharing
Mobile SS: https://drive.google.com/file/d/1s79vDF44QWQESlhUIMCKcZRM85Uehs9s/view?usp=sharing

Looking Forward,
Usman

[Fernando]

Hi Usman,

Can you try temporarily disabling Jetpack plugin?

[Usman]

Yes, I did it. The situation is the same.

[Fernando]

I see. To be sure, can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

It would be good to take a backup of your site before doing so.

[Usman]

Hey @Fernando, thank you for suggesting it.

I did it! I disabled each plugin one by one and tested the site on another browser each time. The problem is still there.

Please note: I have also disabled the menu plus feature of GP. (Was using previously)

[David]

Hi there,

have there been any edits made to the Comments form PHP or any PHP Snippets been added to it ? As the Name input field is missing its type attribute.

[Usman]

Thank you @David for replying.

I haven’t added any snippet regarding the comment form however, I have added a snippet to collect emails (custom code). Further, I also added some CSS to change the color of SUBMIT button.

I removed both the above and each snippet in the plugin. Then, cleared the cache and tested the site in incognito mode and on my phone too.

The issue is still there!!!

[Usman]

Further, after going into the inspect, I added type=”text”, and it worked!

Now question is, where the tag gone!

[David]

Very odd, i think Fernandos train of thought is most probably correct and another plugin is breaking it. If you can’t find the conflict then treat it with this CSS:

.comment-form input[name="author"] {
    border-color: var(--base) !important;
    color: var(--contrast);
    background-color: var(--base-2);
    border: 1px solid;
    border-radius: 0;
    padding: 10px 15px;
    max-width: 100%;
}

[Usman]

Working fine man. 🙂

#Appreciated

Thank you, David and Fernandos. Have a great day.

[David]

Glad we could be of help

[Author]

Posts