cf7 form wrongly sized, in mobile view cannot respond

What other plugins and theme do you use on the site?

Here is the list of plugins I use:
https://drive.google.com/file/d/1OMo93Fg9K4sL4ponjShj1yzbihoTbN28/view?usp=sharing

NeveVersion: 2.10.4
this is the theme

WP 5.7.

Initially I thought the CF7 update caused problems, when I updated it. The problem was there already when I updated all the plugins. So I rollback to current version, but the problem is still there.

Thanks for detailed information. You seem to be using a Drop-in plugin. What drop-in do you use?

You’re welcomed! Thanks for fast reply! But what is a drop-in plugin?

I searched and read this:

https://kevdees.com/what-are-wordpress-drop-in-plugins/

But I still don’t understand what is drop in plug-in… I don’t think I used one??

On the Plugins page you have this line just above the plugins list:

All (22) | Active (21) | … | Drop-in (1)

Open the “Drop-in” link. What do you see there?

Oh… I went and check. Here is it.

“Drop-ins are single files, found in the wp-content directory, that replace or enhance WordPress features in ways that are not possible for traditional plugins.
1 item
Plugins list
Plugin Description

External object cache.”

I have no idea what is that, and how it got there. Could it be automatically inserted by the Neve Theme?

Who is your host? It might have been installed by the host.

My host is Siteground. What should I do? Is there a problem?

Maybe the drop-in has nothing to do with this issue, so let’s ignore it.

Try switching to the default theme, deactivating all plugins excluding Contact Form 7, Akismet, Flamingo, ReCaptcha v2 for Contact Form 7, WordPress Importer, WP Mail SMTP, WP Rollback, Yoast SEO and the object-cache.php drop-in, and clearing all page cache data.

Why you are advised to deactivate plugins and switch to the default theme.

Hi, thanks! I have done what you advised. IN fact, i did it one by one and test, to check which is the exact plugin that clashes with your plugin.

I realized the problem IMPROVES after I decactivate this plugin:
Gutenberg Blocks and Template Library by Otter.

Regarding all the other plugins, and themes, I back-tested. No issue. I have added Custom CSS to improve it too here:

/* CF7 CSS */
@media screen and (max-width: 60em) {
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”]
{
width: 95% !important;
}
}

HOWEVER, all these are done on the staging site here:
https://staging16.baby.meide.sg

May I get your help – how to solve this problem without DE-activating :
Gutenberg Blocks and Template Library by Otter.
??

Can I just deactivate the function specifically for the page affected:
https://baby.meide.sg/book?

This is because a lot of my other pages in the website baby.meide.sg require the plugin functions for proper presentation! It is a super tedious task to edit them one by one after deactviating Gutenberg Blocks and Template Library by Otter. Best if I can just insert some CSS or HTML to fix the problem specfically at:
baby.meide.sg/book, due to the clash between CF7 and Gutenberg Blocks and Template Library by Otter.

Thank you!

It is difficult for me to provide advice as I don’t know at all what Gutenberg Blocks and Template Library by Otter does. Why don’t you ask about it in that plugin’s support forum?

I was thinking of doing that. But for some strange reason, suddenly the problem resolved by itself… Could you check on your side – is the problem resolved also when u try a mobile view of baby.meide.sg/book?

:O