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
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.
Roland Barker 
Raju 
Alex 
Hi, I am struggling to get my ‘edit listing’ page to return a record already created. I have used shortcode [pdb_record] but when using the link in the sign up email (both from the email and typing it in directly) the page returns as Save Your Changes or Record Not Found!
I’ve tried approving the records, deleting them and entering a new listing with different email addresses but not luck, can you help please?
How are you placing the link in your signup email? It should be done using the [record_link] tag. When the email is sent out after a signup a link is generated that includes a code that is specific to the new record so it can be edited.
Also, check the plugin settings under the “Record Form Settings” tab, the Participant Record Page setting should point to the page on your site with the [pdb_record] shortcode.
Hi Roland!
Thanks for great plugin again.
1) Is there any option to arrange the form fields layout in adjacent horizontally rather straight vertical?
2) Also, is there any shortcode, i can use to display the single record page fields in horizontal layout?
Thanks
It’s best to use the “responsive” or “flexbox” templates this kind of thing. In the article linked below, you’ll see some simple configurations for some templates, but ultimately it will require that you have a good understanding of CSS to get the effect you want. I can’t really tell you how to do it, it’s going to be different for each case.
Take a look at this article on the templates you can use: Participants Database Shortcode Templates
Hello, the plugin is great, but I need your help, I want to place the table in a vertical position and not horizontal, can you help me with this? If possible, please tell me in which file you need to change the code to column? thank you in advance.
Hi Alex,
I’m not sure I understand your question…do you mean that you want the headers in the left column, and each record is a column instead of a row?
We do have a custom template you can use that does this:
https://gist.github.com/xnau/68f5169661058beaa4f19ecbbfec3c05
Read about how to use custom templates here: Using Participants Database Custom Templates
Please read that carefully, it will give you the information you need to make it work.
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?
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:
how to get responsive or flexbox working with multisearch?
currently:-
[pdb_list template=multisearch filter='approved=yes']
Try the responsive template for multisearch like this:
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']
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
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!