Did you ever build a Formidable Form using the reCAPTCHA and then test it on mobile devices? Of course you have! The reCAPTCHA doesn't fit and extends over the edges of the forms. This is because the reCAPTCHA is set in an iFrame with a width that can exceed the width of its field container. When that situation occurs, there is a fix!

The following code snippets, when added to your theme, will resize the reCAPTCHA's iFrame to fit properly on mobile devices.

Add this CSS to your theme's style.css or add it to the WordPress Customizer/Additional CSS section:

CSS for Google reCAPTCHA Resizing

CSS

1

2

3

4

.g-recaptcha {

transform-origin:lefttop;

-webkit-transform-origin:lefttop;

}

Change the #frm_field_xxx_container to your form's reCAPTCHA container at line 9 in the below jQuery and add it all to the After Fields section of the forms Settings/Customize HTML page:

If you use a physical robots.txt on a WordPress powered site, then stop it now!

Some web hosts, such as the very popular SiteGround, add crawl-delay: 10 to the physical robots.txt when it is accessed by a bot. If you examine your robots.txt file with a text editor, you won't see it. It's not there physically. But, if you examine robots.txt in the Google Webmaster robots.txt tester tool, you'll see that the crawl-delay line has been added. To learn why this could be a problem, please see this page on Yoast: https://yoast.com/ultimate-guide-robots-txt/#crawl-delay-directive.

Deleting the physical robots.txt allows WordPress to use it's built-in virtual robots.txt. The file does not exist unless a bot tries to access it on your site. The default virtual robots.txt contains the following:

Default WordPress Virtual robots.txt

1

2

3

User-agent:*

Disallow:/wp-admin/

Allow:/wp-admin/admin-ajax.php

The following code snippet, when added to functions.php, allows you to modify the virtual robots.txt to add your own directives. In the example, I've added our XML sitemap to ours.

Google Chrome 67 introduced a browser bug that creates a major problem for websites that use the popular parallax effect with background images. Specifically, parallax images below the fold either don't display at all or just flicker. The following CSS kicks the GPU into action for CSS transitions, making them smoother by applying a higher frame rate.

We only use analytical cookies on our website that allow us to recognize and count the number of visitors and to see how visitors move around the site when they are using it, but they do not identify you individually. They help us to improve the way our website works, for example by ensuring that users are finding what they are looking for easily. Read more about the cookies we use by clicking the Cookie Policy button. By clicking OK you agree to cookies being used in accordance with our Cookie Policy. If you don’t agree you can disable cookies—see the Cookie Policy for more details.