WordPress.org

Ready to get started?Download WordPress

Forums

Participants Database
[resolved] Responsive CSS Formatting (8 posts)

  1. vandeberg25
    Member
    Posted 1 year ago #

    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/

  2. xnau
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. vandeberg25
    Member
    Posted 1 year ago #

    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/

    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

  4. PayBas
    Member
    Posted 1 year ago #

    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 screen and (min-width: 960px) {

  5. vandeberg25
    Member
    Posted 1 year ago #

    There are CSS styles at each of these sizes:

    @media screen and (max-width: 980px)
    @media screen and (max-width: 650px)
    @media screen and (max-width: 480px)
    @media screen and (max-width: 320px)
    @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.

  6. xnau
    Member
    Plugin Author

    Posted 1 year ago #

    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 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.

  7. vandeberg25
    Member
    Posted 1 year ago #

    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.

  8. xnau
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags