CSS class for mobile output with views module

There's probably a lot of ways you could solve this. I don't think it's a bug with this theme though.

What I would do is display the view as a block using PHP... assuming your view has a block, if not make one. Then you can just wrap the view with whatever class you like. So lets say your view grid already uses a class of "foo1". Print the view in a block, and wrap that block with a different class "foo2".

Your code would look something like this:

<div id="foo2">
<?php
$block = module_invoke('views', 'block_view', 'foo-block');
print render($block);
?>
</div>

Then you can just style that specific view.

.foo1 #foo2 {
   // whatever here
}

You're approaching this the wrong way around - there is a method or technology built into Adaptivetheme subthemes that allows for exactly what you want - media queries!

You will notice your subthemes have a file called footheme.responsive.style.css - look at this file, it has media queries all setup that match the default theme settings. All you need to do is place whatever CSS you want in the correct media query block (to target whatever size device) and it will work.

For example you might want to do something like this (for a table display to be responsive in small size screens):

/* Smartphone portrait */
@media only screen and (max-width:320px) {
  .view-name-or-id table td {
    display: block;
    float: left;
  }
}

This is the modern way to target particular devices, rather than doing a device sniff and generating a class (we can do this, but its unreliable and the old school way now largely deprecated by media queries, not entirely, but thats another story...).

Question: can I name all CSS sub-classes within the '@media only screen and (max-width:320px)' class? That is, control all aspects of, say, the classes within the page.css stylesheet using media queries? This, of course, would affect only the mobile devices.

Yes!

Cool.