Title: Responsive CSS Formatting Last modified: August 21, 2016 --- # Responsive CSS Formatting * Resolved [vandeberg25](https://wordpress.org/support/users/vandeberg25/) * (@vandeberg25) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/) * What is the best way to make the [pdb_list] change for small screen size like 480px, 320px and 240px. I am using Responsive theme and was considering creating 2 different [pdb_lists] and display/hide them. * Curious what others have done that is successful? What would you recommend? * [http://wordpress.org/extend/plugins/participants-database/](http://wordpress.org/extend/plugins/participants-database/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/) * (@xnau) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653832) * vandeberg25, * I haven’t tried this myself, but I do know about designing responsive sites. The easiest thing to do is as you suggest show/hide lists using the display attribute, but there could be functional problems if you are using a search form with your lists. The search function won’t work well if there are multiple lists on a page. * You can define a “class” attribute in the shortcode that will add a classname to the wrapper, and this makes a convenient way to select which list is shown. * Thread Starter [vandeberg25](https://wordpress.org/support/users/vandeberg25/) * (@vandeberg25) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653891) * In theory the show/hide concept should work, however I’m running into a roadblock and can’t figure it out. Could you look over the code I’m using and see any issues? * Here is the shortcode for the 2 lists I have placed on the page. Members1 displays until the window is resized to 480 pixels or less. (the ‘hide-480’ class is already built into the WordPress Responsive Theme CSS code). This part works. The second list ‘membersmobile’ is hidden to start and then I want it to display at 480pixels. It just stays hidden… * ‘[pdb_list class=”members1 hide-480″ search=”true” list_limit=”25″ filter=”yr_last_members =2013″ orderby=”last_name” order=”asc” display_count=”true”] * [pdb_list class=”membersmobile” search=”false” list_limit=”25″ fields=”farm_name” filter=”yr_last_members=2013″ orderby=”farm_name” order=”asc” display_count=true]’ * Here is the CSS in my child – stylesheet: * ‘.wrap.pdb-list.membersmobile { display: none; } * ‘@media screen and (max-width: 480px) { * .wrap.pdb-list.membersmobile { display: block; } }’ * Here is my page: [http://michiganangus.com/membership/](http://michiganangus.com/membership/) * I would really like to use this plug-in but if I can’t resolve the responsive component, I will have to find a different solution. * I would really appreciate your feedback or suggestions. Thank you Rebecca * [PayBas](https://wordpress.org/support/users/paybas/) * (@paybas) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653892) * Why are you using (max-width: 480px) ? * If you want some CSS to show on larger displays, you should use a min-width, like: * [@media](https://wordpress.org/support/users/media/) screen and (min-width: 960px){ * Thread Starter [vandeberg25](https://wordpress.org/support/users/vandeberg25/) * (@vandeberg25) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653893) * There are CSS styles at each of these sizes: * [@media](https://wordpress.org/support/users/media/) screen and (max-width: 980px) [@media](https://wordpress.org/support/users/media/) screen and (max-width: 650px) [@media](https://wordpress.org/support/users/media/) screen and (max-width: 480px) [@media](https://wordpress.org/support/users/media/) screen and (max-width: 320px) [@media](https://wordpress.org/support/users/media/) screen and (max-width: 240px) * The show/hide feature I am trying to implement – I want to take effect at the 480px and smaller screen widths. I have no problems at the larger screen widths. Its the revealing only at the smaller screen sizes that I’m having trouble with. * Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/) * (@xnau) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653894) * Rebecca, * You don’t need to define two different shortcodes with different classes to accomplish this. Just make the one shortcode, then use your media queries to change the parameters of it’s class. * Another approach is to use a plugin such as [WP Mobile Detect](http://wordpress.org/extend/plugins/wp-mobile-detect/) to control your content according to the device used. Plugins such as this will load a class into the body tag that you can use to modify your layout according to the device detected. * Thread Starter [vandeberg25](https://wordpress.org/support/users/vandeberg25/) * (@vandeberg25) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653895) * OK – I can try that. How do you limit the fields displayed on the smaller screen sizes? I created two different short codes, the first one with 5 fields and the second with only 1 field to fit/view nicely on a small screen. I felt this was a better option with the database list in a table format instead of trying to squeeze a table with 5 columns into a 240-480 phone screen. * I have a basic understanding of how CSS works – I didn’t realize I could use CSS to limit the data returned (using short codes). * Please explain and I’ll check out the plugin you suggested. * Plugin Author [xnau webdesign](https://wordpress.org/support/users/xnau/) * (@xnau) * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653896) * Rebecca, * You’re right, you cannot use CSS to limit or change the data returned, only how to format it once it’s there. * This plugin I recommended uses shortcodes to allow you to select content based on the device used. Perhaps you could use that to select which shortcode is used. Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Responsive CSS Formatting’ is closed to new replies. * ![](https://ps.w.org/participants-database/assets/icon-256x256.jpg?rev=1389807) * [Participants Database](https://wordpress.org/plugins/participants-database/) * [Frequently Asked Questions](https://wordpress.org/plugins/participants-database/#faq) * [Support Threads](https://wordpress.org/support/plugin/participants-database/) * [Active Topics](https://wordpress.org/support/plugin/participants-database/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/participants-database/unresolved/) * [Reviews](https://wordpress.org/support/plugin/participants-database/reviews/) * 7 replies * 3 participants * Last reply from: [xnau webdesign](https://wordpress.org/support/users/xnau/) * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-css-formatting/#post-3653896) * Status: resolved