[totaltec]

Ah, now I understand. When I made that statement I was referring to images used in your design, or on product pages like in the description. Actual product images have some complicated logic setup, that allows you to control the maximum size of the images from within the admin.

X-cart is designed so that all skill levels can achieve good results, more skilled devs like yourself can dive directly into the templates, and you understand how to properly resize images, not all people do.

I mentioned 350 px because this is the smallest size screen that the template is designed for. Product image sizes are not controlled by CSS currently, to allow the admin side settings to take precedence.

Take a look at /ideal_responsive/customer/main/product.tpl near line 40:

    <div class="image"{if $max_image_width gt 0} style="width: {$max_image_width+12}px;"{/if}>

        {if $active_modules.Detailed_Product_Images and $config.Detailed_Product_Images.det_image_popup eq 'Y' and $images ne ''}

          {include file="modules/Detailed_Product_Images/widget.tpl"}

        {else}

          <div class="image-box">
            {if $active_modules.On_Sale}
              {include file="modules/On_Sale/on_sale_icon_product.tpl" product=$product}
            {else}
            {include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}
            {/if}
          </div>

        {/if}

        {if $active_modules.Magnifier and $config.Magnifier.magnifier_image_popup eq 'Y' and $zoomer_images}
          {include file="modules/Magnifier/popup_magnifier.tpl"}
        {/if}

    </div>

Several things are happening here, first look at "<div class="image"{if $max_image_width gt 0} style="width: {$max_image_width+12}px;"{/if}>"
So we see that the container div for the image is based on the $max_image_width variable, which is based on the actual size of the image.

Next we see "{include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}" This code calls the product thumbnail template, and defines the width and height based on the stored values of the image in the DB.

To make the images "scale" allowing larger images, we need to change both of these lines, and there are a number of ways to do it. One way is to remove the width style from the div container and define the width and height in the CSS, possibly using max-height and max-width. Then we would need to go into the product thumbnail template and remove the code referencing image_x and image_y instead setting these values to be percentage based. An easy trick is to not define both width and height, just define one setting like width, and the height should scale accordingly.

Then you can set the maximum width for that div container using CSS, and you can define it specifically for the different style sheets and thereby screen sizes. Make sense?