Layout issues

[brightcloud]

Hello,

I have some layout issues with this the template I am using. As you will see all the text appears on below the image on the bottom right instead of lined up to the righ of the image. I had this problem with another template and someone pointed me in the right direction but I cannot find the post!

Thanks

Website here
http://www.amphibiandiveshop.org.uk/jl/index.php/component/virtuemart/bangles/17mm-wide-bangle-with-a-polished-finish-detail

[Henrik Holm Nielsen]

Brightcloud,

The issue you have, is due to the fact that the colums with the image end "buy-area" is a tiny bit to wide.
So what you can do, is open the template file showing the product, and make the colums a little bit narrower.

If you are using the default template file, you will find it at:

Code Select Expand

/components/com_virtuemart/views/productdetails/tmpl/default.php

Open this file, and look for the following:

Code Select Expand

<div class="width50 floatleft">
<?php
echo $this->loadTemplate('images');
?>
</div>

<div class="width50 floatright">
    <div class="spacer-buy-area">

I would guess it would solve your issue, if you change the last "width50 floatright" to "width48 floatright". Save the file and refresh the page.
If you want to be sure you modification is not overwritten by future VM updates, you would first copy the file default.php to newdefault.php and the make the modifications there instead. And ofcourse then change the virtuemart configuration to use newdefault.php under the tab "templates" in shop configuration.

[brightcloud]

Brilliant, that fixed it!

Just got the same issue with this page now, do you happen to know which file I should be changing?

http://www.amphibiandiveshop.org.uk/jl/index.php/component/virtuemart/bangles

Much appreciate you help!

[Henrik Holm Nielsen]

It looks like /components/com_virtuemart/views/category/tmpl/default.php

Look for "width30 floatleft" and "width70 floatright" and change to "width25 floatleft" and "width65 floatright" respectively.

A small tip - you can see many of these things, if you use a browser Developer Tool which is available for all major browsers. IE8 & 9 even have one built-in, and you can launch it by pressing F12. Use the "arrow" to the left of the HTML tab, and hover over the problemareas. Clicking the area with the issue, makes you able to see the HTML code and CSS styles applied, and you can test adjustments without saving your tests to disk. Thus you can easily troubleshoot the problem, and then make adjustments in the code accordingly afterwards

[brightcloud]

Brilliant Hendrik,

That has sorted it and I will have a play around with the developer tools which should help me in the future.

Thank you again

David

[Henrik Holm Nielsen]

No problem - glad it worked