Enabling Better Product Listings Within Ubercart Catalog View on Drupal

While configuring the catalog on my development server for Holistic Pet Help, a company that seeks to improve the life of companion animals (www.holisticpethelp.com) I came across a funny setting that made my catalog display funny on both desktops and mobile phones.

Even though the site is using AT Commerce, a reactive theme that is supposed to be designed to handle various different geometries (mobile, tablet, desktop) gracefully, this didn't always turn out to be the case.  One example was when display size was constrained to a rather small footprint (Samsung Galaxy II), it simply didn't work right:

The desktop display was at least legible, but I found the image grotesquely over-large:

The way to fix this is by making a slight alteration to the view that controls how the product images are displayed.  For your reference, the implicated view is uc_catalog.  One easy way to get to it is to click on the configure cog at the right of the screen and choose Edit view.

Another way is to navigate to the view in question using the built-in menus.  Views are under the Structure menu item....

...and are the last choice on the resulting screen.

The next challenge is to determine which view is controlling the display.  In this case I knew from previous knowledge (i.e. clicking around for hours) that it would be uc_catalog.  The above-mentioned way to navigate to the view, using the "cog", is a much easier and faster way than what needed to be done in the old days, which was to basically fish around a lot.  I strongly advise people to use the "configuration cog" method, now that it's available.

The next thing to do is to edit the view, which is accomplished by clicking on Edit:

The next task is to change how images are handled in the view.  This can initiated by clicking on Content: Image:

Once the next screen opens, the Image Style dropdown needs to be changed from None (original image)...

...to Thumbnail (100x100).

Finally, this change to the view need to be saved by clicking on Apply (all displays): 

And the view committed to Drupal by clicking on Save:

This action will resolve how the product is displayed on the desktop...

...and also on the mobile platform in landscape mode...

...but it still doesn't look so good on this mobile platform in portrait mode...

The problem here isn't the amount of information being displayed, it's the way it is being formatted.  The default list format used by the Ubercart uc_catalog view doesn't really lend itself well to a Portrait (tall and narrow) display geometry, because it is Landscape (flat and long) oriented.  This is exactly right for how monitor displays are typically used, but exactly opposite to how mobile phones are typically used, which is tall and skinny.

Thankfully, newer phones can manage this situation better, and are able to display the site properly.  On a newer Samsung device (Galaxy Express II) both Landscape...

...and Portrait mode worked just fine.

...just remember to beware of those legacy devices!

UPDATE:  MARCH 02 2017

Another way to get around the CSS rendering problem with older devices is to change the display type from List to Grid in the view, with an X column constraint (I chose 3) and a fairly large image thumbnail (I chose None (original image), and then resized all of the images to a standard size of 200x400).  

Once I did this, the system produced the following display on my desktop...

...the following Portrait display on my legacy device (Samsung Galaxy II)...

...the following Landscape display on my legacy device.

Voila!  No more rendering problems