Summer 2021 Sale

Cool off with 25% off all pricing plans!

SUNNYGIVE21

Using the Responsive Tables Plugin with Give

Using the Responsive Tables Plugin with Give
This article was written before our tables were revamped to be more naturally responsive. This is kept here for archive purposes and a great example of how Give has grown and developed over the years.

Give has several tables to display important donor information. Some are very wide which can be problematic on mobile devices. Wouldn’t it be great if your tables were responsive? What if I told you that I didn’t have to know a single line of code to make that happen?

Making the Give Subscriptions table Responsive!
Making the Give Subscriptions table Responsive!

The wizardry you see there happened in about 3 minutes using a great little plugin called “Automatic Responsive Tables” by Andrew Rockwell of RockwellGrowth.com

Let’s pause here and appreciate the fact that WordPress (as an ecosystem) is amazing. Folks like Andrew freely offering their expertise and code to your website should have cost you lots of money or time. But he volunteers it to you — for free! What I’m saying is, support developers of free plugins you see on the WordPress Repo.

With that out of the way, let’s hop in to see how I configured Automatic Responsive Tables (ART) to work alongside Give.

Configuring Automatic Responsive Tables

Upon installing and activating ART, I navigated to the “Settings” page by clicking the link on the plugin page. It’s also found as a sub-menu item under the Settings section.

The settings page for the plugin gives you the ability to finely tune how the plugin affects tables on your site. In this case, I didn’t need to fine tune anything and just opted instead for the default.

Automatic Responsive Tables and Give

But I ran into a problem with how the plugin handled the Donation Confirmation page when I used the “Activate for all Tables” setting: the heading row of “Donation Receipt” threw things off. Fortunately, there’s a simple workaround.

By unchecking that box, and including #give_user_history in the class/id box, I target tables like the one on the donation-history page and the Renewals page (if you are using our Recurring Donations add-on) while not targeting the Donation receipt (which already looks stellar on most mobile devices.)

I found for my use that setting the breakpoint at 1024px worked best to display all of my tables responsively using a twenty sixteen child theme. Using the Blisk browser I was able to easily test what breakpoint worked for various devices.

I saved the settings by clicking at the bottom, and that was it!

Thanks, Andrew, for making the Automatic Responsive Tables plugin. Very well done.

About the Author

Liked what you read?

We have a lot more where that came from! Join 15,197 subscribers who stay ahead of the pack.

Share this post

Share on facebook
Share on twitter
Share on linkedin

You might also like

2 Responses

  1. Hey guys! Thanks for this. I did notice that the plugin hasn’t been updated in two years. It seems to still work well, but…are there any plans to make GiveWP tables responsive out of the box? And eliminate the need for an additional plugin? Seems like the thing to do, yes?

Leave a Reply

Your email address will not be published. Required fields are marked *

Like what you're reading?

Subscribe and stay ahead of the curve.

Share on facebook
Share on twitter
Share on linkedin

Choose Your Plan

Get the “” add-on with Recurring Donations, Fee Recovery, Annual Receipts and more for one low price.
 

Pro Plan

normally $499

$374

Annually

Most Popular

Plus Plan

normally $360

$270

Annually

 

Basic Plan

normally $249

$187

Annually