Additional Images Layout

[caesartrading]

Hello Zenners,

I have been playing around with my Product Info layout, and have come across a problem.

At the moment, the Additional Images section (AIS) is up next to the Product Image. That's what I intended.

However, if there are more products than can fit on the first row, instead of creating a new row directly below the first, it starts a new row underneath the Main Image, which just looks messy.
Example here: http://www.the-ishop.co.uk/crystal-c...e-4-p-142.html

Is there a way that I can reformat the AIS to just create a row directly beneath the first?

Thanks

[haredo]

Again you would have to use the <br class="clearBoth">
after the Poduct name like we did last time..

Then:
admin panel/ configuration/ images/ Product Info - Number of Additional Images per Row

[haredo]

Ok, that works, but a little tacking..

Add this to the bottom of the stylesheet.css

.additionalImages {
width: 120px ! important;
}

#productAdditionalImages .clearBoth {
display: none;
}

Find this in the stylesheet.css

#productAdditionalImages {
border: 1px solid #E1E1E1;
margin: 5px;
padding: 5px;
}

Change to this:

#productAdditionalImages {
border: 1px solid #E1E1E1;
margin: 5px;
padding: 5px 0 5px 18.5em;
}

I don't know if this is hard coded in your custom template but we have to get rid of the highlighted red text below: It is place right after your 6th additional image

<div class="additionalImages centeredContent back" style="width:10%;">
<div class="clear"></div>
<div class="separator">&nbsp;</div>
<div class="additionalImages centeredContent back" style="width:10%;">