Change image size in template for product details

[StompJames]

Joomla! 3.7.2   
VirtueMart 3.2.3

Hi,

I have a new template and the images are square, how do I change the width so they are my chosen size?

I can see that the images have a specified width set in the element like below:
<div class="additional-images" u="slides" style="left: 96px;top: 0px;width: 624px;height: 468px;border: 1px solid;z-index: 0;position: absolute;"><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div>

I can also see that they are loaded like so:

<?php
echo $this->loadTemplate('images_additional');
?>

The end result is square images and style tags in the element but how can I change the width?

Sorry if I have repeated this post, it seemed to error as I posted and I can't see if it went through.

Regards,

James P
Joomla! 3.7.2   
VirtueMart 3.2.3

[jenkinhill]

Without a URL nobody can see what you are talking about. Have you asked the template developer?  http://forum.virtuemart.net/index.php?topic=108212.0

[StompJames]

Sorry, the URL won't help as the site is in development and locked. My boss won't appreciate me publicising the site yet either. I have also contacted the developer but as of yet had no reply, I though this forum would be a place to get more general answers and to learn how VM works.

I can however provide screenshots, code snippets and anything else for people who would like to help.

The main thing is that the images have a specified width of 468 and I would like to change it.

Here is some code:

  <div class="vm-product-media-container" id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 712px; height: 470px; overflow: hidden;">
<div class="additional-images" u="slides" style="left: 96px; top: 0px;

width: 468px; height: 468px;

border: 1px solid;">
         <div class="easyzoom easyzoom--overlay">
         <a class="fancybox-thumb" title="Click to enlarge" data-fancybox-type="image" data-fancybox-group="product" data-fancybox="fancybox" href="/images/stories/virtuemart/product/BBKUSHBLACK0202 1.jpg"><img src="/images/stories/virtuemart/product/BBKUSHBLACK0202 1.jpg" alt="" u="image" /></a><img src="/images/stories/virtuemart/product/resized/BBKUSHBLACK0202 1_624x468.jpg" alt="BBKUSHBLACK0202 1" u="thumb" />      </div>
   </div>

        <div u="thumbnavigator" class="jssort02" style="position: absolute; width: 86px; height: 470px; left:0px; bottom: 0px;">
          <div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="position: absolute; width: 86px; height: 86px; top: 0; left: 0;">
              <div class=w>
                <div u="thumbnailtemplate" style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div>
              </div>
              <div class=c></div>
            </div>
          </div>
          <span u="arrowleft" class="jssora11l"></span>
          <span u="arrowright" class="jssora11r"></span>
        </div>
      </div>
    </div>
  </div>

This shows the 468 x 468 image size.

I have also attached a screenshot to show what I mean by a square image.

Regards,

James P
Joomla! 3.7.2   
VirtueMart 3.2.3

[StompJames]

Sorry I forgot to attach the image!

Regards,

James

[jenkinhill]

The code you posted is not default VirtueMart code, and the image posted shows that you are using a commercial template. We cannot provide assistance in such cases as stated in  http://forum.virtuemart.net/index.php?topic=108212.0

If there was a URL then somebody may generously look at the page with Firebug (as you could do) and suggest a fix, but it looks like the developer for some reason has used in-line styles, so you should look at editing the template overrides for product details.