[Done]CGSmartImage and Products Module adapting for phones

[jasnick]

I have CGSmartImage working well with Products Module on website as seen on my computer. http://americanmotorcycles.com.au
Summary template includes:

Code: Select all

 {foreach from=$items item=entry}

  <div class="product_detail_field">
<ul>
<li><a href="{$entry->detail_url}">{$entry->product_name}
 {CGSmartImage src1=$entry->file_location src2=$entry->fields.Photo1->value width='180'}</a></li></ul>
  </div>
{/foreach}

Detail template includes images 1 -10:

Code: Select all

 <ul class="img">
 <li><div>
 <a href="{CGSmartImage src1=$entry->file_location src2=$entry->fields.Photo1->value width='900' notag=1 noembed=1}">
      {CGSmartImage src1=$entry->file_location src2=$entry->fields.Photo1->value width='180'}
    </a></div></li>
 <li><div>...</ul> 

I am using Media Queries to adapt the site for phones and other devices.
Ordinary pages are fine but the two pages containing the product images (the most important part of the site) are not rendering well - the images are far too big, hanging out of their containers and only showing a portion of the images.
How do I fix this? In the CSS in the media query I have

Code: Select all

  img{
        max-width:100%;
        height:auto;
    }

and for the Summary page

Code: Select all

 .product_detail_field img {width: 180px; }

which is the width of the thumbnails and in the Detail page I have

Code: Select all

 ul.img li img

width set to 180px.
The lightbox which shows a really large image 900px on my computer is of course not reducing in size on the phone.
Problem also is that on my phone (Android) all is fine except for the lightbox image being too big on the Detail page. Client uses iPhone5 and ALL of his images are too big, both summary and detail pages.
Thanks to DR.CSS I am using Responsinator to check other devices and on my computer iPhone gets the same results as my Android but on client's actual phone, he sees not thumbnails but large images and parts of large images.
I have seen this in the CGSmartImage Help:
Responsive Images:

CGSmartImage is capable of automatically scaling images down to a size that is suitable for mobile devices. This boosts performance by minimizing the image size for mobile devices, and therefore improves performance and the general user experienace. Unless disabled, the module will look in its database for information about the maximum resolution of the requesting device. If that information cannot be found a remote web service will be queried for the resolution information. If suitable information can be found then the max_width and max_height parameters will be adjusted to rescale the image.

The detection of a mobile device, and enabling responsive behavior will override the noautoscale parameter. The responsive behavior can be disabled either in the modules admin panel, or via the noresponsive parameter.
Maximum image size

In addition to automatic resizing of the image for the device, the max_width and/or max_height parameters can be specified ( where ? ) to indicate an absolute maximum size for the output image. This will override the width and height parameter when scaling the image.

I've Responsive Images enabled - should I be adding Breakpoints?
I am not sure how to add this to a Media Query though it seems it may not be necessary if the deed is done in CGSmartImage.
Thanks
Would really appreciate some help here as I have been researching this for a couple of weeks now.

[jasnick]

I am updating this post with an update I added to another of my posts which was more specific in regards to display on phones.

An update: I consulted Dr.CSS who revamped my templates and media queries and got the site looking really good and working well EXCEPT for the display on the iPhone.
After making myriad changes and going back and forth with the client checking on his iPhone it was obvious that the problem lay with CGSmartImages.
The site finally looked as intended on the iPhone only after reverting back to the usual img src code and doing away with CGSmartImage entirely.
This of course defeats my purpose in using it as the client wants to upload images from his camera which will be very large.

I will add that this issue only seems to occur with iPhones and not Androids.

I am very surprised no-one has come across an instance like this before. If anyone has, I would like to know how they overcame the problem.

[jasnick]

I have marked this post Done, even though not solved. Dr.CSS made the site much more responsive and so I am not using CGSmartImage as this conflicted with the display of images on iPhone.