Decorative Flower
Her Realm, Personal website and blog of Cole
Apr 12

Make Growmap AntiSpam Compatible With WPTouch in Mobile Browsers

Growmap AntiSpam and WPTouch Mobile don't play well together in Chrome

Growmap AntiSpam and WPTouch Mobile don’t play well together in Chrome for Android

A few days ago, Maggie posted in BloggerPR about how Growmap Anti-Spam wasn’t working right on the mobile version of her site, which is powered by WPTouch. I took a look and, sure enough, mine wasn’t working either. In short, the checkbox looked mishaped. I described it as “melted.” Neither the checkbox nor the label text allowed you to select the checkbox. Strangely enough, even though it didn’t look like it was selected, you could still submit a comment. Overall, not very good.

So I delved  into the code to determine what was going on. The checkbox was indeed a checkbox, and it wasn’t even styled. I determined that it must be something in the theme, but this isn’t true. The issue was only occurring with certain browsing including but not limited to:

  • Chrome on Android
  • Amazon Silk (Kindle)
  • Android’s default browser

However, this isn’t an issue with Firefox with Android so you may not even have noticed it if you don’t typically view your own site from your smartphone or tablet or if you don’t use those browsers. Nevertheless, the majority of your mobile visitors could be unable to leave comments, which means less engagement for your effort and possibly lost readers.

Why wants that? Not you and me, that’s for sure!

However, you can fix it. In fact, I have two solutions. Both simply use CSS to reset all checkboxes on your mobile theme, so the box and label text for Growmap AntiSpam works correctly, and your visitors can comment all night long!

Method 1 — Jetpack

  1. Log in to your WordPress dashboard.
  2. Select Jetpack from the navigation.
  3. Enable the “Custom CSS” module.
  4. Enable “Mobile Theme” through Jetpack.
  5. Click “Appearance.” Choose “Edit CSS”
  6. Click “Edit” next to mobile-compatible and choose “Yes”.
  7. Paste the following code into the text box.
  8. Click “Save stylesheet.”

 

input[type="checkbox"] {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-ms-appearance: checkbox !important;
-o-appearance: checkbox !important;
appearance: checkbox !important;
}

Let me know if this advice helps you!If, for some reason, you cannot edit this file or this fix doesn’t take, I have a second option!

Method 2 — WPTouch

  1. Log in to your WordPress dashboard.
  2. Select “Editor” from Appearance.
  3. Choose WPTouch basic theme from the top down menu.
  4. Open style_structure.css.
  5. Copy the follow code to the end of the stylesheet and save. Voila!
input[type="checkbox"] {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-ms-appearance: checkbox !important;
-o-appearance: checkbox !important;
appearance: checkbox !important;
}

Skip to toolbar