Posted on by

Responsive Displays in Participants Database

Responsive layouts are increasingly a necessity in current web design. More and more people will access your site using devices with small screens, and really, screens of a wide variety of sizes and aspect ratios. A responsive layout is a layout that can accommodate all the possible devices: it is responsive to the size and aspect ratio of the user’s screen.

I’m going to briefly touch on the basics of this so that the more specific information that follows will make sense to people who are relatively new to this subject.

How Responsive Displays Work

Layout diagram for the flexbox list display

Responsive layouts rely on the ability of HTML elements, properly styled with CSS, to rearrange themselves and change size on the page display. A good responsive layout is one that can rearrange and resize itself to look good and convey all it’s information on all the different screens. This means that the content is grouped into blocks (often called “containers”) that can stack next to each other in various ways. Groups of blocks will also be in containers that arrange the page on a larger scale. Within the blocks, the content flows into the shape and size of it’s container.

All of this is controlled by multiple CSS style sheets and inline rules, which are lists of targeted declarations that determine the layout and behavior of the blocks.

If this sounds complicated, it really is. And to make matters worse, there is no generally accepted way to achieve this on the web. While it’s good that there are so many options, for someone new to this, it can be hard to decide the best approach, let alone understand how any particular responsive layout works.

In WordPress, this is made a bit easer with the use of responsive themes. It’s only a little bit easier though, because each theme seems to have it’s own way of doing this: some require additional plugins or special child themes, some are built to be responsive natively. Many aren’t responsive at all, and so mobile users might be on a different theme entirely using some kind of theme switcher. Maybe the user doesn’t even get a responsive display, in which case the mobile browser just does it’s best to show the page.

Start with a Responsive Theme

If you want your mobile and handheld device users to have the best experience with your site, you must use a responsive theme or at least a responsive setup for your theme. If you’ve already got a theme and want it to be responsive, contact the theme vendor for instructions on the best way to achieve that with the theme. In some cases, you will just have to change your main theme.

Once you have your responsive theme in place, working and looking the way you want, you can focus on the displays that Participants Database produces.

Participants Database Support for Responsive Layouts

Participants Database has the capability to produce responsive displays, but they are best approached as basic frameworks, not as finished displays that can be set and used as-is. Each shortcode has a responsive template you can use as your starting point:

[pdb_list template=responsive]
[pdb_list template=flexbox]
[pdb_single template=bootstrap]
[pdb_record template=bootstrap]

(My apologies if that is a bit confusing: the “list” shortcode does have a bootstrap template, but it uses a table, and tables are not generally considered responsive.)

Once you enable the responsive template, you’ll want to test it on different devices. Your WordPress theme will be doing most of the work: arranging the page content to fit the screen, changing the way the menu works, etc. Participants Database shortcodes will attempt to fit their output into the content box provided by the theme.

Making it Look Good

Much of the time, the display will work OK, but you may want to make some adjustments to the layout and appearance. This is mostly accomplished with CSS rules to override the existing rules that are formatting the content. Be warned, however, that CSS stylesheets for responsive layouts can be very complex. For example, rules that apply to one screen size, won’t apply to another because its possible to make a rule only active on particular screen sizes. Also, with space so tight, your options for making things look better are going to be very limited.

So: generally speaking, if you are not skilled with CSS, you may find only very limited success in modifying the layout on various devices. It may be best to just be satisfied with a useable display, not necessarily the exact layout you would prefer.

Working with CSS Styles

If you do want to make some changes, and aren’t sure how to proceed, I’ll offer some help. The first thing you’ll want to do is familiarize yourself with your Browser Developer Tools. I find I like Firefox best for this, it has a “responsive display” mode that lets you check various screen sizes easily. At the same time, you can check on the effect of your CSS changes so you know the exact changes you want to make before saving them.

I’ve written a series of articles that can give you some of the basic tools needed to start modifying the CSS and layout of your pages. If you’re new to CSS, I recommend reading it through, it will help you understand how to work with the CSS rules to get what you want…or close to it, anyway.

Simple CSS Techniques for WordPress

This is explained in the article above, but when it’s time to save your CSS rules, Participants Database has a “Custom CSS” setting you can use for this purpose. These CSS settings are only loaded on pages with Participants Database content, so if you need to make global changes to your site layout, it’s better to put your rules in a general custom CSS setting. Most themes (and the Jetpack plugin) provide a place to do this.

The Flexbox List Template

With PDB version 1.7.8, I added the “flexbox” template for the pdb_list shortcode. The flexbox layout offers quite a few options, and I think you’ll find it’s the most flexible template for responsive displays, adapting really well to desktops and mobile phones and everything in between.

[pdb_list template=flexbox]

There are some really easy-to-understand explanations of what is possible with flexbox layouts on CSS Tricks, I suggest giving it a read.

7 thoughts on “Responsive Displays in Participants Database

  1. Hi, great plugin firstly. I have used your tutorial to add the ‘edit link’ to my list display. The code you have supplied only works in the default.php template. Do you have the snippet of code to have the ‘edit link’ working on the flexbox.php template?

    1. I don’t have the code for that, but the code that produces the edit link will work an any template, you just need to make your own custom template using your preferred template as your starting point, then carefully add in the code that produces the edit link. As an example, you could use this code to replace the print value function in the template:

      <?php 
      /*
       * put the edit link URL into the link property of the field
       */
       if ($this->field->name == 'edit_link') {
          $this->field->link = $record->get_edit_link();
       }
       $this->field->print_value();
      ?>
  2. how to get responsive or flexbox working with multisearch?

    currently:-
    [pdb_list template=multisearch filter='approved=yes']

    1. Try the responsive template for multisearch like this:

      [pdb_list template=multisearch-responsive filter='approved=yes']
      1. thanks Roland!
        I’m wondering if flexbox works? I tried the below but doesn’t appear work.

        [pdb_list template=multisearch-flexbox filter='approved=yes']

        1. No, there is only the “multisearch-responsive” template built into the plugin.

          You’ll have to build the custom template yourself if you want to use the flexbox template. If you understand php and HTML it’s not hard: get the pdb-list-flexbox.php template from Participants Database to use as your starting point, then by comparing that to one of the Combo Multisearch templates, you can replace the standard search in the flexbox template with the Combo Multisearch from that template. Be sure you save your template in the correct location.

          Full instructions here: Using Participants Database Custom Templates

        2. hehe, thank you Roland! unfortunately at the moment I am not that technical and will take me some time before I am capable of that! for now i’ll just use the default multisearch. thank you for your help!

Leave a Reply
You have to agree to the comment policy.

7 thoughts on “Responsive Displays in Participants Database

  1. Hi, great plugin firstly. I have used your tutorial to add the ‘edit link’ to my list display. The code you have supplied only works in the default.php template. Do you have the snippet of code to have the ‘edit link’ working on the flexbox.php template?

    1. I don’t have the code for that, but the code that produces the edit link will work an any template, you just need to make your own custom template using your preferred template as your starting point, then carefully add in the code that produces the edit link. As an example, you could use this code to replace the print value function in the template:

      <?php 
      /*
       * put the edit link URL into the link property of the field
       */
       if ($this->field->name == 'edit_link') {
          $this->field->link = $record->get_edit_link();
       }
       $this->field->print_value();
      ?>
  2. how to get responsive or flexbox working with multisearch?

    currently:-
    [pdb_list template=multisearch filter='approved=yes']

    1. Try the responsive template for multisearch like this:

      [pdb_list template=multisearch-responsive filter='approved=yes']
      1. thanks Roland!
        I’m wondering if flexbox works? I tried the below but doesn’t appear work.

        [pdb_list template=multisearch-flexbox filter='approved=yes']

        1. No, there is only the “multisearch-responsive” template built into the plugin.

          You’ll have to build the custom template yourself if you want to use the flexbox template. If you understand php and HTML it’s not hard: get the pdb-list-flexbox.php template from Participants Database to use as your starting point, then by comparing that to one of the Combo Multisearch templates, you can replace the standard search in the flexbox template with the Combo Multisearch from that template. Be sure you save your template in the correct location.

          Full instructions here: Using Participants Database Custom Templates

        2. hehe, thank you Roland! unfortunately at the moment I am not that technical and will take me some time before I am capable of that! for now i’ll just use the default multisearch. thank you for your help!

Leave a Reply
You have to agree to the comment policy.