Responsive CSS Formatting

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.

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: https://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

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) {

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.

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.

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.

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.